盒子
目录

清除浮动和闭合浮动的区别

文章取自我的 Github repos: Learning-HTML-CSS, 作者:@paddingme
原文链接:https://github.com/paddingme/Learning-HTML-CSS/issues/12

原来是一丝提出的“闭合浮动”。为了避免混淆,还是说全吧,“使float元素可以撑高父元素”。

(国内页面重构已经足够乱了还需要特地造个新名词混淆新人吗)

“清除浮动”源于clear float即W3C CSS2.1 9.5.2章定义的内容,意即使用clear阻止这个元素盒子的边和前面的浮动元素相邻的行为;

The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property).

如果“闭合浮动”指的是避免“float无法撑高父容器的默认行为”的话,那么有这些方案:

  • 在float同级最后方加入带有clear:both属性的元素或伪元素(W3C CSS2.1 9.5.2 clearance高度计算部分)
  • 给父级加上一些overflow/float/display table等触发BFC的属性以使父容器成为block formatting context roots(W3C CSS2.1 10.6.7)

10.6.7 ‘Auto’ heights for block formatting context roots
In addition, if the element has any floating descendants whose bottom margin edge is below the element’s bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

参考:http://segmentfault.com/q/1010000000732608