高度塌陷与 BFC

1. 高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的
  当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失
  父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

2. clear（有一定的弊端和隐患）

clear作用：清除浮动元素对当前元素所产生的影响（本质是为元素添加一个margin-top属性，值由浏览器自动计算）
 可选值：
  left 清除左侧浮动元素对当前元素的影响
  right 清除右侧浮动元素对当前元素的影响
  both 清除两侧中影响较大一侧元素的影响（注意，这里不是同时清除两侧的影响）

3. 通过overflow:

hidden等可以为元素开启 BFC(有一定的弊端和隐患)

4. after(高度塌陷)

元素::after{
  content:'';
  clear:both;
  display:block; 
}

5. before(垂直布局中边距重叠的问题：相邻的垂直方向外边距会发生重叠现象)

元素::before{
content:'';
display:table
}

6.clearfix(同时解决高度塌陷和外边距重叠的问题)

元素::before,
元素::after {
  content: "";
  display: table;
  clear: both;
}

高度塌陷问题，一般用::after
外边距重叠问题，一般用::before