摘要：它是用于決定盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域。小白反思如果世界的運(yùn)行都有自我運(yùn)行的一套機(jī)制，那么的世界必然有自己的一套規(guī)則。外邊距合并當(dāng)時(shí)在回答外邊距的問題時(shí)，總結(jié)出了合并的一條規(guī)則必須相鄰。

了解BFC后，能夠更深入的明白外邊距合并原理。
了解BFC后，能夠更深入的明白浮動(dòng)的行為。
了解BFC后，知識(shí)就是你的，總不會(huì)吃虧對(duì)吧？哈哈

之前有兩篇文章《行內(nèi)元素的一些探索》、《浮動(dòng)的一些探索》,或多或少隱式的牽連到了塊級(jí)格式化上下文。

今天正式介紹BFC，以加深對(duì)CSS的理解。

－－－－－－－－－－－－－寫在前面－－－－－－－－－－－－－－－
BFC是時(shí)候表演真正的技術(shù)了之前的內(nèi)容是參考MDN的塊級(jí)格式化上下文和自我思考的過程組成，今日重讀感覺糟糕之極，于是便在此給出w3c規(guī)范中的定義以作補(bǔ)充。

W3C規(guī)范中是這樣定義BFC的：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

這里需要注意的幾個(gè)點(diǎn)block containers、block boxes、their contents。

浮動(dòng)、絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（比如display屬性值為inline-block，tale-cells和table-captions的元素），以及overflow屬性設(shè)置為visible以外的塊級(jí)盒子都為它們的內(nèi)容創(chuàng)建了新的塊級(jí)格式化上下文。

原文在這
block formatting context

徹底了解w3c規(guī)范BFC的定義后可以直接閱讀最后一部分內(nèi)容（bfc是時(shí)候表演技術(shù)）

塊級(jí)格式化上下文（block formatting context）是頁面CSS視覺渲染的一部分。它是用于決定盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域。BFC之間不會(huì)相互影響。

一共三句話。
第一句話忽略不計(jì)。

第二句話很關(guān)鍵。不過先反問下，這句話里的盒子指的是誰，也就是說決定誰的浮動(dòng)和布局？

這個(gè)問題的答案其實(shí)很簡(jiǎn)單，這里的盒子指代的是產(chǎn)生BFC元素的塊級(jí)子元素。

反思：什么條件產(chǎn)生BFC，決定誰的布局？
解答：BFC的產(chǎn)生見下文。塊級(jí)格式化上下文（BFC）從字面上理解應(yīng)該能推測(cè)出盒子指代的是塊級(jí)子元素。

第三句話也很重要。BFC之間不會(huì)相互影響，那么BFC和其它的元素會(huì)發(fā)生影響，BFC中的元素和其它的元素會(huì)發(fā)生影響嘛？

答案是肯定的，BFC和其它元素會(huì)發(fā)生影響，但BFC中的元素不會(huì)受其它元素影響。

反思：這里的其它元素指的是什么元素？
解答：處在同一個(gè)包含塊中同級(jí)別（互為兄弟關(guān)系）的元素。

官方外衣總是華麗，值得琢磨，盡管仔細(xì)思考了也必然有所獲。但，作為程序員，怎能不去了解她的心。

塊級(jí)格式化上下文包括了創(chuàng)建該上下文的元素的所有子元素，但不包括創(chuàng)建了新的塊格式化上下文的子元素。

如果世界的運(yùn)行都有自我運(yùn)行的一套機(jī)制，那么BFC的世界必然有自己的一套規(guī)則。世界的運(yùn)行總避免不了能力超凡者打破規(guī)矩、突破限制形成另一個(gè)世界并不再受之前的約束。這里的能力超凡者就可以理解為創(chuàng)建了新的塊級(jí)格式化上下文的元素。那么如果獲得創(chuàng)造新世界的能力呢？

世界從來都不是平等的，或許就像海賊王里的天龍人，高高在上。BFC有些元素與生俱來，有些就靠開發(fā)者來賦予。

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

浮動(dòng)和定位元素（設(shè)置了float不為none或position不為relative和static）

overflow不為visible的元素

display設(shè)為inline-block、table－cell和table-caption

新的世界，總會(huì)形成一套自己的規(guī)矩。

在BFC中,盒子從頂端開始垂直地一個(gè)接一個(gè)排列，兩個(gè)盒子之間的垂直間隙是由他們的margin值決定

在同一個(gè)BFC中，兩個(gè)相鄰塊級(jí)盒子的垂直外邊距會(huì)產(chǎn)生重疊

在BFC中，每一個(gè)盒子的左邊緣都會(huì)觸碰到容器到左邊緣

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

這是一種常見的現(xiàn)象。有些時(shí)候，實(shí)際需要的效果是下面這樣的。

為了直觀的看到BFC的作用，給段落p添加個(gè)背景色。

清晰看見p的行框有一部分是在綠色透明塊之下的，現(xiàn)在賦予p元素BFC的話，那么浮動(dòng)的Div和p就相當(dāng)于超強(qiáng)者（各自形成自己的BFC），根據(jù)BFC之間互不影響這一特性。效果就是下面這樣的。

當(dāng)時(shí)在回答div外邊距的問題時(shí)，總結(jié)出了合并的一條規(guī)則：margin必須相鄰。但當(dāng)時(shí)只探究了margin合并的條件，卻未曾探究條件的產(chǎn)生（什么情況才算相鄰）。現(xiàn)在從BFC的角度重聊這個(gè)話題。

margin相鄰的前提條件

必須處于文檔正常流的塊級(jí)盒子，并且處于同一個(gè)BFC

沒有線盒，沒有清除區(qū)域（clearance），沒有padding和border

margin都是垂直方向上的

針對(duì)第一點(diǎn)，進(jìn)行一個(gè)簡(jiǎn)單的說明。

這是常見的外邊距合并。觸發(fā)合并的因素符合相鄰的前提條件。
代碼如下

一般情況阻止外邊距重疊會(huì)給父元素Div.parent設(shè)置overflow:hidden。

那么如果給Div.child設(shè)置overflow:hidden呢？

.child{width:200px;height:200px;margin:30px 0;background:#f3a;overflow:hidden;}

怎么會(huì)這樣？Div.child不是產(chǎn)生了新的BFC嗎？那么Div.parent和Div.child就不在同一BFC中了。那么不是違背了margin相鄰的前提條件中的第一條了嗎？為什么還發(fā)生重疊了？

反思：重疊既然發(fā)生了，說明一個(gè)問題，那就是margin相鄰的條件全部滿足了。這說明Div.parent和Div.child處在同一個(gè)BFC，overflow:hidden設(shè)置給父元素時(shí)確實(shí)發(fā)生作用并產(chǎn)生了新的BFC，并阻止重疊。
overflow:hidden設(shè)置給子元素時(shí)也確實(shí)作用并產(chǎn)生新BFC，但卻沒阻止重疊。

說到這，需要考慮的問題就是BFC概念了。
在BFC的心這一節(jié)里有提BFC的內(nèi)部組成。這里再次引用：

塊級(jí)格式化上下文包括了創(chuàng)建該上下文的元素的所有子元素，但不包括創(chuàng)建了新的塊格式化上下文的子元素。

一句話概括：BFC是為其內(nèi)容而生的。

BFC不包括產(chǎn)生BFC的元素，也就是不包括生產(chǎn)者！

overflow:hidden設(shè)置給父元素時(shí)，阻斷了重疊發(fā)生。這說明Div.parent和Div.child不處在同一個(gè)BFC中。child處在parent產(chǎn)生的BFC中，而parent處在最開始的BFC中。所以重疊不發(fā)生。

overflow:hidden設(shè)置給子元素時(shí)，重疊發(fā)生。這說明Div.parent和Div.child處在同一個(gè)BFC中。child產(chǎn)生的BFC并不會(huì)把child自己也納入進(jìn)去，而是作用于child的子元素。因此parent和child依然處于同一個(gè)BFC中，所以重疊發(fā)生。

小白提問
考慮下Div.parent和Div.child多帶帶設(shè)置display:inline-block時(shí)，會(huì)發(fā)生什么現(xiàn)象？

答案或許是這樣的，和overflow一樣唄。
實(shí)踐才出真理。
無論是給父元素還是子元素設(shè)置display:inline-block,重疊都不會(huì)發(fā)生。為什么呢？不都是產(chǎn)生了BFC嗎？

小白揭秘
margin相鄰前提條件的第一條里是要求必須是塊級(jí)盒子，而在w3c規(guī)范中規(guī)定，塊級(jí)盒子的display屬性必須是以下三種之一："block"， "list-item"， 和 "table"。display:inline-block不在其列，因而無論給誰設(shè)置display都不滿足條件。所以重疊不發(fā)生。

下面代碼中的margin-top方向?yàn)槭裁礇]有產(chǎn)生下移的視覺效果，而margin-left方向居然產(chǎn)生了左移的效果。

這個(gè)問題困惑了我很久。淺談個(gè)人對(duì)該問題的理解：
在閱讀前，最好深入margin屬性。如果不愿意看的話，那就直接看下面這段話吧。

在 margin 中 top、right、bottom、left 的參考線并不一致為一類，而是分為了兩類參考線。top 和 left 的參考線屬于一類，right 和bottom 的參考線屬于另一類。top 以 containing block 的 content 上邊或者垂直上方相連元素 margin 的下邊為參考線垂直向下位移；left 以 containing block 的 content 左邊或者水平左方相連元素 margin 的右邊為參考線水平向右位移。right 以元素本身的 border 右邊為參考線水平向右位移；bottom 以元素本身的border 下邊為參考線垂直向下位移。

小白分析
這段話首先將trbl分成了兩類。
其中top和left的參考線又分為兩種。

container block content top（left）
top和left分別對(duì)應(yīng)父元素的content top edge或content left edge

sibling margin-bottom （margin-right）
top和left分別對(duì)應(yīng)相鄰元素的margin-bottom或margin-right(這里當(dāng)然會(huì)發(fā)生margin collapse)

bottom和right是以元素自身的border-bottom（border-right）為邊界。

問題剖析
1.margin-left發(fā)生了水平偏移，且child在水平方向并沒有相鄰元素，這說明其參考是父元素(section)的content left edge。
2.margin-top沒發(fā)生偏移，這至少說明其參考線不是父元素（section)的content top edge。然而在垂直方向上，child是擁有一個(gè)相鄰的東西（clearance），那么很明顯就是clearance搗鬼。如果clearance被解析成盒模型了，那么垂直方向肯定能產(chǎn)生位移，如果解析成其他一些東西了，那么沒有位移就很正常了。 (這一點(diǎn)也模糊，希望有人指點(diǎn)）

w3c clearance

兩列布局的要求：
一欄寬度固定一欄寬度隨瀏覽器發(fā)生改變

以下最常見的代碼，沒有任何問題。

    
    
This is main content

換個(gè)思路實(shí)現(xiàn)兩列布局，各位看官看好嘍。

    
This is main content
    

這里做了三處修改

將main與aside的位置交換

為main添加右浮動(dòng)，改變aside浮動(dòng)方向，并顯式設(shè)置了width:100%

為main添加了margin-left:-200px；

這樣看上去是沒有任何一點(diǎn)問題的。

如果向main里添加更多的文字會(huì)發(fā)生什么？

那么第一種兩列布局會(huì)不會(huì)發(fā)生上面這種情況呢？

你真的懂BFC了嗎？

小白解析

第一種布局之所以不會(huì)發(fā)生重疊，是因?yàn)樗鼈冊(cè)谕粋€(gè)BFC中

第二種布局之所以會(huì)重疊，是因?yàn)樗鼈冊(cè)诓煌珺FC中

問題產(chǎn)生

    

        
I am boss
        
        
    

基本描述：此時(shí)給中間綠色塊div填寫內(nèi)容會(huì)出現(xiàn)重疊現(xiàn)象，原理同上述兩列布局

為了解決這個(gè)問題，出現(xiàn)兩種思路（或許雙飛翼是圣杯的優(yōu)化方案）

圣杯好像很好吃的樣子～

    

        
I am boss
        
        
    

以上就是圣杯布局。分析就不寫了。直接看雙飛翼布局吧，非常精妙的布局。

    

        

            
I am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am bossI am boss
        
        
        
    

小白分析
首先在不考慮使用position:relative的情況下，要達(dá)到圣杯布局的效果，那只能通過margin來作用。先貼張問題圖方便閱讀

那么直接給main（綠色的div）添加margin: 0 100px 0 250px;不就行了嗎？

由上述兩張圖可知道m(xù)argin屬性只有左邊的發(fā)生作用了，而右邊的未發(fā)生作用。這是因?yàn)?b>屬性過分受限(overconstrained)，將margin-right強(qiáng)制設(shè)為auto了。（調(diào)試器看不出來的）

因此該思路不可行。

于是便思索通過水平格式化這一idea來實(shí)現(xiàn)。

給main套一層div.wrap-main

將main的部分屬性（float、width)移到div.wrap-main，并為main添加margin: 0 100px 0 250px;

至此，雙飛翼布局已經(jīng)實(shí)現(xiàn)。

涉及知識(shí)點(diǎn)總結(jié)：

水平格式化

屬性過分受限（overconstrained）

margin屬性深入了解

bfc的深入認(rèn)識(shí)

float的深入了解

最后一點(diǎn)小收獲：

這張圖應(yīng)該很有印象吧，前面有喲。

為什么這里有個(gè)空白？aside.right在哪里呢？

盡管main的margin-right水平受限被設(shè)置為auto，但在計(jì)算和渲染時(shí)，100px仍然會(huì)發(fā)生作用。所以aside.left的margin-left:-100%不是靠著最左邊而是間隔了100px。受其影響，aside.right的margin-left:-100px就把自己藏在了最左邊（下圖的位置）。
以上純屬個(gè)人理解