Block Formatting Contexts(块级格式化上下文)

1.什么是Block Formatting Contexts(块级格式化上下文)

block formatting contexts简称BFC,在可视化格式模型中，BFC饰演相当重要的角色。它能把一个集合中的float,margin,clear等等的各种元素包裹，形成的一个集合就为BFC,BFC中的任何都不会对BFC外的元素产生影响。

通俗地来说：创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。在常规流( Normal flow )块格式化上下文( block formatting contexts)触发方式，在创建了块格式化上下文的元素中的子元素都会按照块格式化上下文提供的规矩来排列自己，除非自己也创建一个新的块格式化上下文。从表现上来说，IE6~7的hasLayout 可以等同于现代浏览器 BFC。

2.触发Block Formatting Contexts的条件

一个块级格式化上下文是满足以下条件中至少一条的盒模型：

• float 除了none以外的值
• overflow 除了visible 以外的值（hidden，auto，scroll ）
• display (table-cell，table-caption，inline-block)
• position（absolute，fixed）
• fieldset元素
  

需要注意的是，display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是 display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息，直到HTML5标准里才出现。有些浏览器bugs（Webkit，Mozilla）提到过这个触发行为，但是没有任何官方声明。

3.Block Formatting Contexts有什么特性?

(1)块级格式化上下文会阻止外边距叠加

仅当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距才会叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。

(2)块级格式化上下文包含浮动

详见： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots

(3)块级格式化上下文不会重叠浮动元素

根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题）.

W3C 规范说：Block Formatting Context的盒模型border外延（而不是margin外延，也就是说无视margin设置）不会覆盖周围的浮动盒模型margin外延。这就是说 浏览器应该默默创建一个特定边距来阻止Block Formatting Context的盒模型border外延覆盖周围的浮动盒模型。出于此种原因，接在浮动元素后面的Block Formatting Context上设置的负边距应该是无效的（应该被浏览器默默创建的特定边距覆盖），不过对此-webkit浏览器和IE6会有不正确的理解，试试用不同的浏览器看看这个页面，webkit和IE6理解是不正确的，其余是正确的。

border外延跟一个盒模型有没有设置border属性完全没有关系，只是从盒模型上无视margin而已。

这个我表示最难理解了….智商着急表示看不懂上面那段话呀!!!