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而已。

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