首页 > 代码库 > 清除浮动的原理剖析

清除浮动的原理剖析

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

  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

 

清除浮动的原理剖析