BFC：Block Formatting Context.

BFC就是一種布局方式，在這種布局方式下，盒子們自所在的 containing block 頂部起一個接一個垂直排列，水平方向上撐滿整個寬度 (除非內部的盒子自己內部建立了新的 BFC)。 developer center上面有對BFC的一段描述：

一個 block formatting context 是web頁面可視化CSS渲染的一個部分，是一塊 block boxes 排布以及 float 元素相互作用的區域。

可以理解為一個作用范圍，在一個BFC里的布局與其之外的布局不相關或者說不相互影響。有一個形象的例子可作參考：

把一個頁面想象成大的集裝箱，這個集裝箱里裝的貨物就是HTML元素。在現實生活中為了避免不同人的貨物相互混淆，都是把 貨物打好包裝再裝入集裝箱，這樣的話無論你包裝里面的貨物怎么擺放，都不會影響到其他人的貨物。那么這個包裝就可以被想象成Block Formatting Context。

如何創建BFC

當一個HTML元素滿足下面條件的任何一點，都可以產生Block Formatting Context：

• float的值不為”none”
• overflow的值不為”visible”
• display的值為 “table-cell”, “table-caption”, or “inline-block”中的任何一個
• position的值不為 “static” 或 “relative”中的任何一個

我是一個使用浮動布局的孩子來的。今天才知道了這種原來也有可以不用清除浮動來布局，只要對BFC這個概念清晰明了，完全可以不用清除浮動來布局了。

以前的誤解

1.折疊margin

以前總是認為，相鄰兩個盒子放在一起，他們的margin會重疊，取值為最大的一個作為他們之間的margin值

下面我在一篇文章里面徹底了解了折疊margin產生的原因了。

這些margin都處于普通流中，并在同一個BFC中；
這些margin沒有被非空內容、padding、border 或 clear 分隔開；
這些margin在垂直方向上是毗鄰的，包括以下幾種情況：

1. 一個box的top margin與第一個子box的top margin
2. 一個box的bottom margin與最后一個子box的bottom margin，但須在該box的height為auto的情況下
3. 一個box的bottom margin與緊接著的下一個box的top margin
4. 一個box的top margin與其自身的bottom margin，但須滿足沒創建BFC、零min-height、零或者“auto”的height、沒有普通流的子box

垂直方向上毗鄰的box不會發生折疊的情況：

根元素的外邊距不會參與折疊

一個有clearance的box的上下margin毗鄰，它會與緊接著的下一個box發生margin折疊，但折疊后的margin不會再與它們父box的bottom margin折疊

折疊邊距的計算

當兩個margin都是正值的時候，取兩者的最大值；當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從 0 位置，負向位移；當有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。但必須注意，所有毗鄰的margin要一起參與運算，不能分步進行。

如何解決再float的情況下兩個盒子折疊在一起呢？方法當然是建立一個bfc

<div>
<div id="A">
<div id="B">
B：給A加了overflow:auto之后，我有10px的margin-top了
</div>
</div>
</div>

上面可以看到，想解決垂直邊距疊加問題，關鍵就是給相對應的容器新建一個BFC。

建立一個BFC來解決處于同一個盒子中的兩個不同盒子分離出來

2.BFC可以包裹浮動元素實例解析

繼續BFC的話題的討論，本文討論一個簡單的例子：如何制作兩行兩列的網頁布局，解決浮動布局不換行的問題。

制作兩行兩列的布局方法很多，浮動布局、表格布局和基于display:inline-block的列表布局。這個重點討論浮動布局，因為我們這里要解決浮動布局里的一個問題：元素浮動不換行怎么辦？其他布局先做簡單敘述，作為拓展將在以后的博文里仔細論述。
用浮動布局實現

考慮一下下面的例子,目標是顯示成兩行兩列：

<div id="A">
<div id="red"></div>
<div id="orange"></div>
</div>
<div id="B">
<div id="yellow"></div>
<div id="green"></div>
</div>

我們可以看到四個盒子最終都處在一列里面。

但我們的本意是讓他們處在同一個盒子，并分成兩列的。

有什么方法呢？

在其中一個外層盒子建立一個BFC了。

<div id="A">
<div id="red"></div>
<div id="orange"></div>
</div>
<div id="B">
<div id="yellow"></div>
<div id="green"></div>
</div>

好了，終于實現兩行兩列的浮動布局了，明白了嗎？就是BFC的作用：BFC可以包裹浮動元素

3.左邊的浮動，右邊的盒子被左邊的遮住了

以前我一直以為是正常的，現在了解到BFC才了解到原來可以避免，以前一直是通過給右邊添加padding-left或者margin-left來使之脫離了左邊的遮罩。

現在才知道可以通過給右邊建立新的BFC來使之在A的右邊的。

代碼可以為：

<div class="item">
<div class="img"></div>
<div class="content"></div>
</div>

css代碼可以為

.img{float:left; margin-right:10px; }
.content{overflow:auto; zoom:1;}

4.層內浮動溢出的探討

<div id="side">向左浮動元素</div>
<div id="content">
<div id="content-inner">
<ul class="content-banner clearfix">
<li class="item">向左浮動元素</li>
<li class="item">向左浮動元素</li>
<li class="item">向左浮動元素</li>
</ul>
</div>
</div>

這個問題實例中給ul的父級元素加一個：overflow:auto;*zoom:1就可以了（加浮動也可以或其他），即新建一個BFC，問題解決了。

本文示例來自這篇：BFC學習札記，非常感謝作者寫出這么高質量的文章。

另外我這里也很喜歡他舉出的幾個例子和解決方法。希望日后可以發現更多相關BFC的內容。（作者網站已經掛掉，鏈接暫時去掉）

1、BFC可以阻止垂直邊距疊加問題

2、BFC可以包含內部元素的浮動

3、BFC可以阻止元素被浮動覆蓋

4、BFC可以決定清除浮動的范圍

參考資料：

白話Block Formatting Context

CSS定位機制之一：普通流

CSS 101: Block Formatting Contexts（BFC）（原文已掛掉，這里是轉載的）

Block-level boxes、containing block、block formatting context 三者之間的區別和聯系

關于Block Formatting Context（BFC)

總結

以上是生活随笔為你收集整理的css学习专题-BFC的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。