清浮动的方法

由于浮动，绝对定位，使得元素脱离了标准文档流，对页面布局造成影响。

由于浮动，父元素会产生高度塌陷，高度为0，如何清除浮动带来的影响，这就是“清浮动”。

清浮动的方法：

1. 内墙法：

①添加空白div：在父元素内部最后添加， .clear{clear:both;} <div class="clear"></div>

②伪元素：给父元素添加::after F::after{content:''; clear: both; display: block;}

2. 触发BFC

 ① float: 除了none以外的值（left right）

 ② overflow: 除了visible以外的值（auto hidden scroll）

 ③ position: absolute fixed

 ④ display: table-cell table-caption inline-block flex inline-flex

 ⑤ fieldset元素

3. 给父元素直接设置高度

下图是高度塌陷：父元素由于子元素设置了浮动而高度为0

清浮动的方法：

①利用伪元素清浮动：

该方法在 ie6、7 中无效，需要对 #content 设置 zoom:1。

#content{zoom:1}

② 父元素加个子元素clear:both;

③触发BFC

.content {
    float:left;
    /*overflow:auto;*/
    /*overflow:hidden;*/
    /*overflow:scroll;*/
    /*display:table-cell;*/
    /*display:inline-block;*/
    /*display:flex;*/
    /*display:inline-flex;*/
    /*display:table-caption;*/
    /*position:absolute;*/
    /*position: fixed;*/
}