清除浮动的原理剖析

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

  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,避免了外边距叠加。

你可能感兴趣的:(原理)