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

這個我表示最難理解了….智商着急表示看不懂上面那段話呀!!!