摘要：詳見權威指南塊級元素即塊級元素是源文檔中被格式化為塊的元素，或者屬性為的元素。概念顧名思義塊級格式化上下文。每個元素的的左邊，與包含塊的左邊相接觸對于從左往右的格式化，否則相反。

情景：浮動的高度塌陷時，使用overflow：hidden可使父元素將浮動的子元素包含起來，解決問題。但背后的原理是什么？這就是今天要談的BFC。

在將BFC之前需要先了解幾個概念：

盒子模型（Box model）：相信這個大家已經很了解了，這里就不詳細說了。詳見《CSS權威指南》

塊級元素：

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the "display" property make an element block-level: "block", "list-item", and "table".

即塊級元素是源文檔中被格式化為塊（block）的元素，或者display屬性為："block", "list-item", and "table"的元素。

塊級盒：

Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme.

塊級盒主要存在于BFC中，每個塊級元素會產生主要的塊級盒，該盒包含其子框和生成的內容，同時會受到不同定位方案的影響。

塊容器盒

Except for table boxes, and replaced elements，a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.

除了表格框和替換元素，其他的塊級盒都是塊容器盒，塊容器盒要么只包含塊級盒，要么建立一個IFC（內行格式化上下文），并不是所有的塊容器盒都是塊級盒：非替代inline-block和非替代table cells是塊容器盒但不是塊級盒。既是塊級盒又是快容器盒的叫做塊盒。
一下是塊級盒、塊盒和塊容器盒三者的關系

正常流：無論是塊級盒或者是行內盒在正常流都屬于格式化上下文，塊級盒存在于BFC，行內盒存在于IFC，所以，正常流格式化上下文中包含BFC和IFC（行內格式化上下文，另一種格式化上下文）。

BFC（Block formatting contexts）：顧名思義塊級格式化上下文。通俗的說，它是一個獨立的渲染區域，里面只有Block-level box，并規定他們的布局方式，與其他區域互不影響。

根元素或其它包含它的元素

浮動 (元素的 float 不為 none)

絕對定位元素 (元素的 position 為 absolute 或 fixed)

行內塊 inline-blocks (元素的 display: inline-block)

表格單元格 (元素的 display: table-cell，HTML表格單元格默認屬性)

表格標題 (元素的 display: table-caption, HTML表格標題默認屬性)

overflow 的值不為 visible的元素

彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)

內部的Box會在垂直方向，一個接一個地放置

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊。如果相鄰有一個是BFC的話，則BFC里面的子元素margin與外面的Box的margin不重疊。

每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

BFC的區域不會與float box重疊，常用來清除浮動和布局。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算

1.防止margin值重疊（布局規則2）

舉個例子：

body{padding:0;margin:0}
        .red{
            background:red ;
            width:200px;
            height: 200px;
            margin: 10px;          
        }

        .black{
            background:black ;
            width:200px;
            height: 200px;
            margin: 10px;
        }

結果margin重疊：

讓紅色方塊變成BFC后：

body{padding:0;margin:0}
        .red{
            background:red ;
            width:200px;
            height: 200px;
            margin: 10px;          
        }
        .wrap{overflow: hidden;}
        .black{
            background:black ;
            width:200px;
            height: 200px;
            margin: 10px;
        }

結果margin不重疊

2.清除浮動
父元素包含浮動子元素（全部）時，高度會出現坍塌。

body{padding:0;margin:0}
        .wrap{
            width: 500px;
            border: blue solid 2px;
        }
        .red{
            border: red solid 1px;
            width:200px;
            height: 200px;
            float: left;         
        }
        
        .black{
            border: black solid 1px;
            width:200px;
            height: 200px;
            float: right;

        }

結果：

給父元素添加overflow: hidden;后父元素變成BFC，根據布局規則6，父元素會將子元素包含在內。

body{padding:0;margin:0}
        .wrap{
            width: 500px;
            border: blue solid 2px;
            overflow: hidden;
        }
        .red{
            border: red solid 1px;
            width:200px;
            height: 200px;
            float: left;         
        }
        
        .black{
            border: black solid 1px;
            width:200px;
            height: 200px;
            float: right;

        }

結果

3.兩欄自適應布局
如果左欄設置為浮動，右邊一欄正常顯示，則會將浮動會蓋住右邊。

![clipboard.png](/img/bVHIZZ)
l>


    
    
    


         

          

body{padding:0;margin:0}

        .left{
            border: red solid 1px;
            width:200px;
            height: 200px;
            float: left;         
        }
        
        .main{
            border: black solid 1px;
            width:250px;
            height: 250px;
            

        }

結果

給main那一欄添加 overflow: hidden;后變成BFC（根據布局規則2）。

body{padding:0;margin:0}

        .left{
            border: red solid 1px;
            width:200px;
            height: 200px;
            float: left;         
        }
        
        .main{
            border: black solid 1px;
            width:250px;
            height: 250px;
            overflow: hidden;
            
        }

結果

因為根元素就是一個BFC，文檔中塊級盒的布局規則符合BFC，所以書里面寫的文檔流是從上到下的排列、相鄰塊級之間的margin會發生重疊，浮動會自動形成block等知識點，其實在這里就能找到答案。包括清除浮動、兩欄自適應布局的原理也清晰明了。因此掌握BFC原理也掌握另一種解決問題的思路。
這里有點建議就是盡量閱讀官網的資料，里面的內容最準確，最權威。

以上是我粗淺的理解，如果哪里有問題，請幫忙指出，有未涉及的知識點，歡迎補充。一起學習，共同進步。

https://www.w3.org/TR/2011/RE...

https://developer.mozilla.org...

http://www.yangyong.me/css2-b...