bfc 已經是乙個耳聽熟聞的詞語了，網上有許多關於 bfc 的文章，介紹了如何觸發 bfc 以及 bfc 的一些用處（如清浮動，防止 margin 重疊等）。雖然我知道如何利用 bfc 解決這些問題，但當別人問我 bfc 是什麼，我還是不能很有底氣地解釋清楚。於是這兩天仔細閱讀了css2.1 spec 和許多文章來全面地理解bfc。
在解釋 bfc 是什麼之前，需要先介紹 box、formatting context的概念。
box: css布局的基本單位
box 是 css 布局的物件和基本單位， 直觀點來說，就是乙個頁面是由很多個 box 組成的。元素的型別和 display 屬性，決定了這個 box 的型別。 不同型別的 box， 會參與不同的 formatting context（乙個決定如何渲染文件的容器），因此box內的元素會以不同的方式渲染。讓我們看看有哪些盒子：
formatting context
formatting context 是 w3c css2.1 規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。最常見的 formatting context 有 block fomatting context (簡稱bfc)和 inline formatting context (簡稱ifc)。
css2.1 中只有bfc和ifc,css3中還增加了gfc和ffc。
bfc 定義
bfc(block formatting context)直譯為"塊級格式化上下文"。它是乙個獨立的渲染區域，只有block-level box參與， 它規定了內部的block-level box如何布局，並且與這個區域外部毫不相干。
bfc布局規則：
內部的box會在垂直方向，乙個接乙個地放置。
box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
bfc的區域不會與float box重疊。
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
計算bfc的高度時，浮動元素也參與計算
根元素float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
1. 自適應兩欄布局
**：123
4567
891011
1213
1415
1617
1819
2021
22
頁面：根據bfc布局規則第3條：
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。
根據bfc布局規則第四條：
我們可以通過通過觸發main生成bfc的區域不會與float box重疊。
bfc， 來實現自適應兩欄布局。12
3.main
當觸發main生成bfc後，這個新的bfc不會與浮動的aside重疊。因此會根據包含塊的寬度，和aside的寬度，自動變窄。效果如下：
2. 清除內部浮動
**：123
4567
891011
1213
1415
1617
1819
頁面：
根據bfc布局規則第六條：
計算bfc的高度時，浮動元素也參與計算
為達到清除內部浮動，我們可以觸發par生成bfc，那麼par在計算高度時，par內部的浮動元素child也會參與計算。
**：123
.par
效果如下：
3. 防止垂直 margin 重疊
**：123
4567
891011
1213
14
haha
hehe
頁面：
兩個p之間的距離為100px，傳送了margin重疊。
根據bfc布局規則第二條：
我們可以在p外面包裹一層容器，並觸發該容器生成乙個box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊
bfc。那麼兩個p便不屬於同乙個bfc，就不會發生margin重疊了。
**：123
4567
891011
1213
1415
1617
1819
haha
hehe
效果如下:
其實以上的幾個例子都體現了bfc布局規則第五條：
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
bfc內部的元素和外部的元素絕對不會互相影響，因此， 當bfc外部存在浮動時，它不應該影響bfc內部box的布局，bfc會通過變窄，而不與浮動有重疊。同樣的，當bfc內部有浮動時，為了不影響外部元素的布局，bfc計算高度時會包括浮動的高度。避免margin重疊也是這樣的乙個道理。 前端精選文摘 BFC 神奇背後的原理
bfc 已經是乙個耳聽熟聞的詞語了，網上有許多關於 bfc 的文章，介紹了如何觸發 bfc 以及 bfc 的一些用處 如清浮動，防止 margin 重疊等 雖然我知道如何利用 bfc 解決這些問題，但當別人問我 bfc 是什麼，我還是不能很有底氣地解釋清楚。於是這兩天仔細閱讀了css2.1 spec...
歷史精選文章合集
感悟思考 你如果只是一直囤乾貨，那永遠不可能進步 閱讀高於自己的作品，遠離精神毒品 談一點關於名校的話題 談一下寫作的重要性 走捷徑不一定是好事 年輕不要給自己設限 讀大學的幾點建議 我是如何轉變自己的思維方式的 最高端的交友方式是真誠以待 生活閱讀 這一部分文章寫的很隨心，自己想起啥就寫啥，生活嘛...
前端BFC布局學習
bfc，全稱為 block formatting context 按照我的理解是我們在某一條件下會觸發bfc布局，會產生一定的效果。block formatting contexts翻譯為 塊級元素格式化上下文。它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關係和相互作用。其中塊級元素可以...