清除浮动

       因为浮动会脱离文档流，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为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浏览器所写。

     该方法不会影响代码结构和语义化，复用方式不当会造成代码量增加。但一般属于最常用方法。

对于这些清除浮动方法的原理可看该文章