清除浮动的原理剖析

常用的清除浮动的几种方法总结下：

　　1，手动设置一个标签（在浮动元素下方），然后对其设置clear属性　　

　　2，给浮动元素设置 :after伪类，创建块元素，设置clear属性

　　3，给父元素设置浮动

　　4，给父元素设置overflow设置非visible值（auto，hidden）

　　5，给父元素的display设置为table-cell

　　7，在ie6,7中，设置zoom或者width，height来触发haslayout，使父元素包含浮动元素

 

原理剖析：

　　1,2方法之所以可以成功，是因为了clear属性。规范上说，对一个元素设置clear属性，那么该元素的上边框紧邻着浮动元素的margin-bottom渲染（假设元素上方为浮动元素，若不是浮动元素，则按照margin的设置进行布局）。这样对height设为auto的父元素而言，高度自然是包含了浮动元素。

 

　　3,4,5方法主要激活了父元素的块级格式化上下文“属性”。块级格式化上下文有一些与块框不同的属性：

　　　　1）包含浮动元素

　　　　2）不会被浮动元素遮盖

　　　　3）防止外边距叠加

　　

　　激活BFC的条件有一些，他们是：

　　　　1）设置浮动

　　　　2）设置绝对（固定）定位

　　　　3）设置display：inline-block,table-cell,table-caption(设置为table也可以起作用，但是不是因为是它的功效，是因为设置display：table，css会添加匿名表单，自然也包含table-cell，因此该匿名表单也拥有块级格式化上下文)

　　　　4）overflow:auto || hidden || scroll

 

　　7方法只对IE6,7有效，触发hasLayout的方式：

　　　　1）设置width和height值（非auto）

　　　　2）设置浮动

　　　　3）display：inline-block

　　　　4）zoom：（非auto）

　　　　5）display：absolute

 

　　另外，Nicolas Gallagher提出了一种更完美的做法：

　　

/* For modern browsers */

.cf:before,.cf:after {

content:"";

display:table;

}
.cf:after { clear:both; }

/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }

　　之所以使用 伪元素:before，是为了防止内部元素与该元素的外边距叠加。该元素内部第一个子元素的display设置为table，则会创建一个BFC，避免了外边距叠加。