核心提示：因为浮动会脱离文档流，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，清除浮动，使其包含框表现出正常的高...
因为浮动会脱离文档流，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，清除浮动，使其包含框表现出正常的高度。
清除浮动主要包含以下方法：
1、为父元素添加高度，只要元素浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素，即可清除浮动带来的影响。
2、clear：both；clear为清除浮动的关键字，其只能影响清清除的元素本身，并不能影响其他元素。即clear：left指的是该元素左侧不允许出现浮动元素。同理，clear：both即为左右浮动都要清除。但是它有个缺点，即margin会失效。
3、overflow：hidden；该方法可让margin生效。但这样会导致不会自动换行使内容被隐藏，无法显示需要溢出的元素。
4、overflow：auto；该方法不会隐藏元素，但子元素高度超出父元素时，显示滚动条。
5、：after；为父元素添加伪类，即
.clearfix:after{
content:"";
display:block;
clear:both;
visibility:hidden;
height:0;
}
.clearfix{
*zoom:1
}
其中clear：both；为清楚浮动，其余代码为将增加内容设置为不可见。最后的代码为兼容IE浏览器所写。
该方法不会影响代码结构和语义化，复用方式不当会造成代码量增加。但一般属于最常用方法。
对于这些清除浮动方法的原理可看该文章
