整理自撩课学院（www.itlike.com）

使用原因

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题； 只要把浮动的盒子圈到里面，让父盒子闭合出口和入口不让它们出来影响其他元素。

标准流.png

浮动后.png

清除浮动的方法

1）额外标签法

方式：

通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或其它标签

优点：

1、W3C推荐的做法
2、通俗易懂，书写方便

缺点：

添加许多无意义的标签，结构化较差

2）父级添加overflow属性

方式：

通过触发BFC的方式，可以实现清除浮动效果 (BFC)。可以给父级添加： overflow为 hidden|auto|scroll

优点：

代码简洁

缺点：

内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

3）使用after伪元素

方式：

给父元素添加clearfix类

优点：

不用单独加新标签，符合闭合浮动思想 结构语义化正确

缺点：

由于IE6-7不支持:after，需要使用 zoom:1触发 hasLayout

注意：

content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则在firefox 7.0前的版本会有生成空格。

代码：

 .clearfix:after {  
    content: "."; 
    display: block; 
    height: 0;
    clear: both;
    visibility: hidden;
  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

4）使用before和after双伪元素

方式：

给父元素添加clearfix类

优点：

代码更简洁

缺点：

由于IE6-7不支持:after，需要使用 zoom:1触发 hasLayout

代码：

.clearfix:before, .clearfix:after { 
     content:"";
     display:table;  
  }
.clearfix:after {
     clear:both;
  }
.clearfix {
     *zoom:1;
  }