清除浮动的原理剖析

标签：io   ar   sp   on   bs   as   line   tt   nbsp   

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

　　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

清除浮动的原理剖析

标签：io   ar   sp   on   bs   as   line   tt   nbsp   

原文地址：http://www.cnblogs.com/accordion/p/4106722.html