清除浮动方法汇总

1. 额外标签法：在浮动元素末尾添加一个空的标签，例如<div       style="clear: both">

优点：通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化比较差。

2. 父级添加overflow属性方法

原理： 触发BFC,可以实现清除浮动的效果。

优点： 代码简洁

缺点： 内容溢出会被隐藏掉

3. 使用after伪元素清除浮动

.clearfix:after {

    content: '.';                    //内容为小点，尽量加不要空，否则旧版本的浏览器有空隙

    display: block;              //转化为块级元素

    height: 0;                     

    visibility: hidden;          //隐藏盒子

    clear: both;                  //清除浮动

}

.clearfix {

   *zoom: 1;        //ie6,7的清除浮动方法

}

4. 使用after和before双伪元素清除浮动

.clearfix:after, .clearfix:before　｛

　　content: "";

 　　display: table;　　　　／／触发ＢＦＣ，防止外边距重合

｝

.clearfix:after　｛

　　 clear: both; 

｝

.clearfix {

   *zoom: 1;        //ie6,7的清除浮动方法

}

注： 推荐使用方法3，方法4