BFC：Block Formatting Context.
BFC就是一種佈局方式，在這種佈局方式下，盒子們自所在的 containing block 頂部起一個接一個垂直排列，水平方向上撐滿整個寬度 (除非內部的盒子本身內部創建了新的 BFC)。 developer center上面有對BFC的一段描述：
一個 block formatting context 是web頁面可視化CSS渲染的一個部分，是一塊 block boxes 排布以及 float 元素相互做用的區域。css
能夠理解爲一個做用範圍，在一個BFC裏的佈局與其以外的佈局不相關或者說不相互影響。有一個形象的例子可做參考：html
把一個頁面想象成大的集裝箱，這個集裝箱裏裝的貨物就是html元素。在現實生活中爲了不不一樣人的貨物相互混淆，都是把 貨物打好包裝再裝入集裝箱，這樣的話不管你包裝裏面的貨物怎麼擺放，都不會影響到其餘人的貨物。那麼這個包裝就能夠被想象成Block Formatting Context。前端
如何建立BFC
當一個HTML元素知足下面條件的任何一點，均可以產生Block Formatting Context：css3
- float的值不爲」none」
- overflow的值不爲」visible」
- display的值爲 「table-cell」, 「table-caption」, or 「inline-block」中的任何一個
- position的值不爲 「static」 或 「relative」中的任何一個
我是一個使用浮動佈局的孩子來的。今天才知道了這種原來也有能夠不用清除浮動來佈局，只要對BFC這個概念清晰明瞭，徹底能夠不用清除浮動來佈局了。web
之前的誤解
1.摺疊margin
之前老是認爲，相鄰兩個盒子放在一塊兒，他們的margin會重疊，取值爲最大的一個做爲他們之間的margin值ide
下面我在一篇文章裏面完全瞭解了摺疊margin產生的緣由了。佈局
這些margin都處於普通流中，並在同一個BFC中；
這些margin沒有被非空內容、padding、border 或 clear 分隔開；
這些margin在垂直方向上是毗鄰的，包括如下幾種狀況：學習
一、一個box的top margin與第一個子box的top margin
二、一個box的bottom margin與最後一個子box的bottom margin，但須在該box的height爲auto的狀況下
三、一個box的bottom margin與緊接着的下一個box的top margin
四、一個box的top margin與其自身的bottom margin，但須知足沒建立BFC、零min-height、零或者「auto」的height、沒有普通流的子box網站
垂直方向上毗鄰的box不會發生摺疊的狀況：ui
根元素的外邊距不會參與摺疊
一個有clearance的box的上下margin毗鄰，它會與緊接着的下一個box發生margin摺疊，但摺疊後的margin不會再與它們父box的bottom margin摺疊
摺疊邊距的計算
當兩個margin都是正值的時候，取二者的最大值；當 margin 都是負值的時候，取的是其中絕對值較大的，而後，從 0 位置，負向位移；當有正有負的時候，先取出負 margin 中絕對值中最大的，而後，和正 margin 值中最大的 margin 相加。但必須注意，全部毗鄰的margin要一塊兒參與運算，不能分步進行。
如何解決再float的狀況下兩個盒子摺疊在一塊兒呢？方法固然是創建一個bfc
< div id="A" style="background:#aaa;overflow:auto;margin-top:20px;">
< div id="B" style="background:white;border:1px solid green;margin-top:10px;">
B：給A加了overflow:auto以後，我有10px的margin-top了
</div>
< /div>
< /div>
2.BFC能夠包裹浮動元素實例解析
繼續BFC的話題的討論，本文討論一個簡單的例子：如何製做兩行兩列的網頁佈局，解決浮動佈局不換行的問題。
製做兩行兩列的佈局方法不少，浮動佈局、表格佈局和基於display:inline-block的列表佈局。這個重點討論浮動佈局，由於咱們這裏要解決浮動佈局裏的一個問題：元素浮動不換行怎麼辦？其餘佈局先作簡單敘述，做爲拓展將在之後的博文裏仔細論述。
用浮動佈局實現
考慮一下下面的例子,目標是顯示成兩行兩列：
< div id="red" style="background: red;width: 100px;height: 100px;float: left;"></div>
< div id="orange" style="background: orange;width: 100px;height: 100px;float: left;"></div>
< /div>
< div id="B">
< div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;"></div>
< div id="green" style="background: green;width: 100px;height: 100px;float: left;"></div>
< /div>
咱們能夠看到四個盒子最終都處在一列裏面。
但咱們的本意是讓他們處在同一個盒子，並分紅兩列的。
有什麼方法呢？
在其中一個外層盒子創建一個BFC了。
< div id="red" style="background: red;width: 100px;height: 100px;float: left;"></div>
< div id="orange" style="background: orange;width: 100px;height: 100px;float: left;"></div>
< /div>
< div id="B">
< div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;"></div>
< div id="green" style="background: green;width: 100px;height: 100px;float: left;"></div>
< /div>
3.左邊的浮動，右邊的盒子被左邊的遮住了
4.層內浮動溢出的探討
< div id="content">
< div id="content-inner">
< ul class="content-banner clearfix">
< li class="item" style="float:left">向左浮動元素</li>
< li class="item" style="float:left">向左浮動元素</li>
< li class="item" style="float:left">向左浮動元素</li>
< /ul>
< /div>
< /div>
參考資料：
CSS 101: Block Formatting Contexts（BFC）（原文已掛掉，這裏是轉載的）
Block-level boxes、containing block、block formatting context 三者之間的區別和聯繫