Block Formatting Context (块格式化上下文)

Block Formatting Context (块格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 'margin' 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse)。

在 Block Formatting Context 中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的 Block Formatting Context 。

当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context

  • float的值不为none。
  • overflow的值不为visible。
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • position的值不为relative和static。

前一篇提到的IE的 hasLayout  与BFC大同小异,但IE系列的浏览器,直到IE8才有BFC的概念,所以当一个元素在IE6/7下触发了hasLayout而在其它浏览器下未触发BFC,或者在IE下未触发hasLayout,而只触发了BFC的时候,就可能有兼容性问题。

IE6/7最常用的就是zoom:1这个属性触发hasLayout了,结合BFC的触发条件,常用zoom:1和overflow:hidden这对组合。

Comments
Write a Comment