摘要：譯文理解中的塊級格式化上下文塊級格式化上下文是網頁視覺渲染的一部分，并用于決定塊盒子的布局。根據所言浮動絕對定位元素為或行內塊元素表格單元格表格標題以及屬性值不為的元素除了該值被傳播到視點的情況將創建一個新的塊級格式化上下文。

Original Author: Ritesh Kumar
Original Article: http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
Translator: HaoyCn
Date: 9th of Aug, 2015

塊級格式化上下文（Block Formatting Context）是網頁CSS視覺渲染的一部分，并用于決定塊盒子的布局。在定位體系（Positioning Scheme）中它屬于常規流（Normal Flow）。根據W3C所言：

浮動、絕對定位元素（position 為 absolute 或 fixed）、行內塊元素  display:inline-block、表格單元格 display:table-cell、表格標題 display:table-caption 以及 overflow 屬性值不為 visible 的元素（除了該值被傳播到視點 viewport 的情況）將創建一個新的塊級格式化上下文。

上面的引言差不多總結了一個BFC是如何形成的。但讓咱們用另外一種更通俗易懂的方式來重定義它。一個BFC就是一個HTML盒子，它至少滿足以下條件之一：

float 的值不為 none

position 的值不為 static 或 relative

display 的值為 table-cell、table-caption、inline-block、flex 或 inline-flex

overflow 的值不為 visiable

一個BFC可以顯式觸發。如果我們想創建之，我們只需給它添加上面提到的任何一個CSS樣式。

比如，看下面的HTML:

    Some Content here

一個新的BFC可以通過給容器添加任意一個必要的CSS樣式來創建，比如overflow: scroll，overflow: hidden，display: flex，float: left，或 display: table。盡管上述條件都可以創建BFC，但也會產生一些其他效果，如：

display: table 可能引發響應性問題

overflow: scroll 可能產生多余的滾動條

float: left 將把元素移至左側，并被其他元素環繞

overflow: hidden 將裁切溢出元素

所以無論何時，當要創建一個BFC時，我們要基于需求選擇最恰當的樣式。為了保持一致性，我在本文的所有例子中均使用 overflow: hidden。

.container {
    overflow: hidden;
}

你可以自由選擇使用除 overflow: hidden 之外的其他樣式。

W3C規范道：

在BFC上下文中，每個盒子的左外側緊貼包含塊的左側（從右到左的格式里，則為盒子右外側緊貼包含塊右側），甚至有浮動也是如此（盡管盒子里的行盒子 Line Box 可能由于浮動而變窄），除非盒子創建了一個新的BFC（在這種情況下盒子本身可能由于浮動而變窄）。

簡單來說，如上圖所示，所以屬于BFC的盒子都左對齊（在從左到右的格式下）并且它們的左外側緊貼包含塊的左側。在最后一個盒子中我們可以看到盡管左側存在一個浮動元素（棕色），另外一個元素（綠色）仍然緊貼包含塊的左側。該情況的產生原理將在下文關于文字環繞的部分中討論。

在常規流中，盒子從包含塊的頂部開始一個個地垂直擺放。兩個同胞盒子間的垂直舉例由兩個盒子各自的外邊距所決定，但不是二者外邊距之和。

為便于理解，我們看個例子。

在上圖中，一個紅盒子（div）包含著兩個同胞綠元素（p），一個BFC已經創建了出來。

    
Sibling 1
    
Sibling 2

相應的CSS是：

.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    background-color: lightgreen;
    margin: 10px 0;
}

理論上兩個同胞元素間的外邊距應當是二者外邊距之和（20px）但實際上卻是10px。這就是眾所周知的外邊距折疊（Collapsing Margins）。如果同胞元素外邊距不同，將應用最大的那個。

在討論了上面BFC折疊外邊距的情況后，現在說避免折疊可能有點讓人摸不著頭腦。但我們必須牢記于心的一件事是，相鄰塊級盒子（同胞）之間的垂直外邊距只有在它們處于同一個BFC時才會發生折疊。如果它們分屬于不同的BFC，就不會折疊了。所以，通過創建新的BFC我們可以避免外邊距折疊。

讓我們在早前的例子中添加第三個同胞元素，現在HTML是：

    
Sibling 1
    
Sibling 2
    
Sibling 3

CSS是：

.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    background-color: lightgreen;
    margin: 10px 0;
}

結果和上面一樣，即是說，折疊還是會發生并且三個同胞間分隔的垂直距離是10px。這是因為三個 p 標簽都從屬于同一個BFC。

現在我們修改第三個同胞元素，使之成為一個新的BFC的一部分。現在的HTML變成了：

    
Sibling 1
    
Sibling 2
    

        
Sibling 3
    

CSS：

.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    margin: 10px 0;
    background-color: lightgreen;
}
.newBFC {
    overflow: hidden;  /* creates new block formatting context */
}

現在輸出的結果就有所不同了：

因為第二個和第三個同胞元素現在分屬于不同的BFC，它們之間就不會發生外邊距折疊了。

BFC可以包含浮動。我們經常遇到容器中含有浮動元素的情況。這種情況下容器元素沒有高度并且其浮動子元素脫離了網頁的常規流。我們通常用清除浮動解決這個問題，最普遍的做法就是使用偽元素。但我們也可以通過創建一個BFC來解決問題。

看個例子：

    
Sibling
    
Sibling

CSS：

.container {
    background-color: green;
}
.container div {
    float: left;
    background-color: lightgreen;
    margin: 10px;
}

在上面這個例子中，容器沒有任何高度，并且它包不住浮動子元素。為解決此問題，我們通過添加 overflow: hidden 來在容器中創建一個新的BFC。修改后的CSS成了：

.container {
    overflow: hidden; /* creates block formatting context */
    background-color: green;
}

.container div {
    float: left;
    background-color: lightgreen;
    margin: 10px;
}

現在容器可以包住浮動子元素，并且其高度會擴展至包住其子元素，在這個新的BFC中浮動元素又回歸到頁面的常規流之中了。

有時候浮動DIV旁邊的文本會環繞它（如下圖1所示）而這種情況有時候并不如我們所愿，我們想要下圖2的效果。要解決這個問題，我們可以用外邊距，但也可以用BFC。

首先讓我們弄明白為何文字會環繞。要理解這個我們必須明白，當存在元素浮動的時候，盒模型如何工作。這就是我早先討論BFC中對齊時候的遺留問題。我們通過下圖來看圖1到底發生了什么。

假設HTML是：

    

        Floated div
    
    

        Quae hic ut ab perferendis sit quod architecto, 
        dolor debitis quam rem provident aspernatur tempora
        expedita.
    

上圖整個黑色區域表示 p 元素，如我們所見，p 元素沒有移位但它疊在了浮動元素之下，而p元素的行盒子（即文本行）卻移位了，行盒子水平變窄來給浮動元素騰出了空間。

隨著文本的增加，最后文本將環繞在浮動元素之下，因為那時候行盒子不再需要移位，也就成了圖1的樣子。這就是為什么即便有浮動元素，段落仍緊貼包含塊的左側，而行盒子會變窄來給浮動元素騰位子。

如果我們能位移整個 p 元素，這個環繞問題也就迎刃而解了。

在說解決方案之前，我們再回顧下W3C規范：

在BFC上下文中，每個盒子的左外側緊貼包含塊的左側（從右到左的格式里，則為盒子右外側緊貼包含塊右側），甚至有浮動也是如此（盡管盒子里的行盒子 Line Box 可能由于浮動而變窄），除非盒子創建了一個新的BFC（在這種情況下盒子本身可能由于浮動而變窄）。

據此，如果 p 元素創建一個新的BFC那它就不會再緊貼包含塊的左側了。給 p 元素添加 overflow: hidden 就能輕而易舉地辦到。這解決了文本環繞浮動對象的問題。

如果我們創建一個占滿整個容器寬度的多列布局，在某些瀏覽器中最后一列有時候會掉到下一行。這可能是因為瀏覽器四舍五入了列寬從而所有列的總寬度會超出容器。但如果我們在多列布局中的最后一列里創建一個新的BFC，它將總是占據其他列先占位完畢后剩下的空間。

我們來舉個三列布局的例子：

這是HTML:

    
column 1
    
column 2
    
column 3

CSS：

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
/*    Establishing a new block formatting 
    context in the last column */
.column:last-child {
    float: none;
overflow: hidden; 
}

現在盡管盒子的寬度稍有改變，但布局不會打破。當然，對多列布局來說這不一定是個好辦法，但能避免最后一列下掉。這個問題上彈性盒或許是個更好的解決方案，但這個辦法可以用來說明元素在這些環境下的行為。

我希望本文已經向你展示了BFC的特性以及BFC是如何影響頁面上的元素的視圖定位的。展示其用法的例子應該有讓BFC顯得更透徹一些。

如果你有任何想要補充的，請在評論里留言。如果你想更深入了解的話，一定得去回顧W3C對這個話題的詳述。

本文中提及的浮動與行盒子變窄問題深入探討，可以參看博文：http://www.zhangxinxu.com/wordpress/?p=583

W3C標準中“除了該值被傳播到視點 viewport 的情況”，可以參看問題：http://segmentfault.com/q/1010000002645174

轉載本文亦請同時注明原出處（見本文頂部）。如您認可本文翻譯，歡迎推薦或收藏，謝謝！