整理自撩课学院（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;
}
