Block Formatting Context

在 W3C CSS 2.1 标准中，BFC（block formatting context，块级格式化范围）规定了浏览器如何渲染块级元素及其浮动。具体来说，对下面这些元素将创建一个 BFC：

• float 值不为 none 的元素
• overflow 值不为 visible 的元素
• position 值为 absolute 或 fixed 的元素
• display 值为 inline-block，table-cell 或 table-caption 的元素

创建了 BFC 的元素，将作为一个整体来渲染，即它会框住它的子元素，使得子元素不会影响外面其它元素的布局。具体来说是 BFC 元素有如下这些特点：

• BFC 元素不会和它的子元素产生垂直 margin 的折叠（非 BFC 元素则会）。
• BFC 元素不会让浮动的子元素脱离它，而会增加大小以框住浮动子元素。
• BFC 元素不会被浮动的兄弟元素覆盖（但是它的 margin 可能被覆盖）。

IE6 和 IE7 不使用 BFC，而是使用它独有的 hasLayout 属性。利用 hasLayout 也可以达到上述 BFC 元素的目标，但做法却不同，从而导致许多不兼容的问题。首先，下述这些元素默认的 hasLayout 为 true：

• body 元素 以及严格模式中的 html 元素
• table，tr，th 和 td 元素
• img 元素
• hr 元素
• input，button，select，textarea，fieldset 和 legend 元素
• iframe，embed，object 和 applet 元素
• marquee 元素

在 IE6 中可以通过设置下列 CSS 属性使得元素的 hasLayout 为 true：

• position: absolute 或者 fixed
• float: 除了 none 的任何值
• display: inline-block
• width: 除了auto 之外的任何值
• height: 除了auto 之外的任何值
• zoom: 除了normal 之外的任何值
• writing-mode: tb-rl
• -ms-writing-mode: tb-rl

在 IE7 中还可以用如下方式来设置 hasLayout：

• min-width: 任何值
• min-height: 任何值
• max-width: 除了 none 之外的任何值
• max-height: 除了 none 之外的任何值
• overflow: 除了 visible 的任何值
• overflow-x 或者 overflow-y: 除了visible 之外的任何值

对于 IE6 和 IE7，最常见的做法是用 zoom:1 来设置 hasLayout，因为它没有其它副作用。

注记：在 CSS 3 中，block formatting context 称为 flow root。

参考资料：
[1] W3C CSS 2.1 - Visual formatting model #Normal flow
[2] W3C CSS 2.1 - Box model #Collapsing margins
[3] Block formatting context - CSS | MDN
[4] Block Formatting Context 能帮助我们做什么？
[5] CSS 101: Block Formatting Contexts - YUI Blog（翻译）
[6] 详说 Block Formatting Contexts (块级格式化上下文)
[7] KB010: 常规流( Normal flow )  - W3Help
[8] How does the CSS Block Formatting Context work?
[9] 块级格式化上下文 (block formatting contexts) 触发条件探讨
[A] hasLayout property (Internet Explorer) - msdn
[B] HasLayout Overview - msdn
[C] Internet Explorer hasLayout - hasLayout.net（翻译）
[D] On having layout — the concept of hasLayout in IE/Win
[E] 详解：已经被IE8抛弃的HasLayout | 青蛙国度
[F] The Internet Explorer hasLayout Property
[G] 更加直观地了解hasLayout和BFC - w3ctech
[H] hasLayout && Block Formatting Contexts
[I] 无 hasLayout 且 Block Formatting Context 的元素的表现差异
[J] A List Apart: Articles: CSS Positioning 101
[K] Understanding CSS and Floats
[L] 那些年我们一起清除过的浮动 - 云路科技
[M] 谈外margin collapsing(外边距叠加) - winter-cn - 博客园