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

情景：浮動(dòng)的高度塌陷時(shí)，使用overflow：hidden可使父元素將浮動(dòng)的子元素包含起來(lái)，解決問(wèn)題。但背后的原理是什么？這就是今天要談的BFC。

在將BFC之前需要先了解幾個(gè)概念：

盒子模型（Box model）：相信這個(gè)大家已經(jīng)很了解了，這里就不詳細(xì)說(shuō)了。詳見(jiàn)《CSS權(quán)威指南》

塊級(jí)元素：

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".

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

塊級(jí)盒：

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.

塊級(jí)盒主要存在于BFC中，每個(gè)塊級(jí)元素會(huì)產(chǎn)生主要的塊級(jí)盒，該盒包含其子框和生成的內(nèi)容，同時(shí)會(huì)受到不同定位方案的影響。

塊容器盒

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.

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

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

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

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

浮動(dòng) (元素的 float 不為 none)

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

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

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

表格標(biāo)題 (元素的 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)

overflow 的值不為 visible的元素

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

內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置

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

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

BFC的區(qū)域不會(huì)與float box重疊，常用來(lái)清除浮動(dòng)和布局。

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

1.防止margin值重疊（布局規(guī)則2）

舉個(gè)例子：

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

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

結(jié)果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;
        }

結(jié)果margin不重疊

2.清除浮動(dòng)
父元素包含浮動(dòng)子元素（全部）時(shí)，高度會(huì)出現(xiàn)坍塌。

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;

        }

結(jié)果：

給父元素添加overflow: hidden;后父元素變成BFC，根據(jù)布局規(guī)則6，父元素會(huì)將子元素包含在內(nèi)。

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;

        }

結(jié)果

3.兩欄自適應(yīng)布局
如果左欄設(shè)置為浮動(dòng)，右邊一欄正常顯示，則會(huì)將浮動(dòng)會(huì)蓋住右邊。

![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;
            

        }

結(jié)果

給main那一欄添加 overflow: hidden;后變成BFC（根據(jù)布局規(guī)則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;
            
        }

結(jié)果

因?yàn)楦鼐褪且粋€(gè)BFC，文檔中塊級(jí)盒的布局規(guī)則符合BFC，所以書(shū)里面寫(xiě)的文檔流是從上到下的排列、相鄰塊級(jí)之間的margin會(huì)發(fā)生重疊，浮動(dòng)會(huì)自動(dòng)形成block等知識(shí)點(diǎn)，其實(shí)在這里就能找到答案。包括清除浮動(dòng)、兩欄自適應(yīng)布局的原理也清晰明了。因此掌握BFC原理也掌握另一種解決問(wèn)題的思路。
這里有點(diǎn)建議就是盡量閱讀官網(wǎng)的資料，里面的內(nèi)容最準(zhǔn)確，最權(quán)威。

以上是我粗淺的理解，如果哪里有問(wèn)題，請(qǐng)幫忙指出，有未涉及的知識(shí)點(diǎn)，歡迎補(bǔ)充。一起學(xué)習(xí)，共同進(jìn)步。

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

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

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