Float布局，高度塌陷，Clear详解

何为 float 流式布局？遇到元素塌陷如何解决？

将float属性设置为left或right，来实现在水平方向上的布局。

如果元素塌陷，两种方式解决：

• 开启父元素的BFC（设置overflow:hidden），由于BFC布局规则：计算BFC的高度时，浮动元素也参与计算，所以父元素的高度不会塌陷。
• 使用伪类after，开启display:block，并且开启clear:both（我的理解是：display只要是块级元素，拥有上外边距的都可以，所以display:table也行，但是不能是inline-block，原因未知）

clear的作用是清除浮动元素对该元素的影响，比如两个块元素本来应该垂直分布，期中A块开启了浮动（假设是left），则B块上移动，开启clear:left后，B不受影响，还在原先的位置。clear的实现原理，是浏览器为B添加了上外边距（不过检查不到），clear:both的作用是清除较大浮动元素的影响。

所以对after开启clear:both后，浏览器会把浮动元素的大小转换为相同大小的上外边距给after，就能撑起父元素了。

完善版.clearfix：

.clearfix::before,.clearfix::after{
    content:'';
    display:table;
    clear:both;
}