浮动的工作原理

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动元素引起的问题：

1)  父元素的高度无法被撑开，影响与父元素同级的元素

2)  与浮动元素同级的非浮动元素会跟随其后

3)  若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动的几种方法：

1) 额外标签法。使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决2、3问题。

　　注意：clear属性只适用于块级元素。

　　缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。

1 
     

2)  使用after伪元素清除浮动。对于问题1，添加如下样式，给父元素添加clearfix样式：

　　注意：该方法只适用于非IE浏览器。由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

1 .clearfix:after { 2     content: "."; 3     display: block; 4     height: 0; 5     clear: both; 6     visibility: hidden; 7 } 8 .clearfix { 9     display: inline-block;10 } /* for IE/Mac */

　　关于该方法具体介绍请参考：　

　　关于伪元素的基础介绍可参考：

　　关于伪元素的深入理解请参考：

3)  浮动外部元素。

4)  设置 overflow 为 hidden 或者 auto清除浮动。

　　说明：给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。