首页 > 代码库 > 清除浮动的原理剖析
清除浮动的原理剖析
常用的清除浮动的几种方法总结下:
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
清除浮动的原理剖析