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(hidden,auto,scroll)
1. 自適應兩欄布局
<頁面：style
>
body
.aside
.main
style
>
<
body
>
<
div
class
="aside"
>
div>
<
div
class
="main"
>
div>
body
>
根據bfc布局規則第3條：
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。
根據bfc布局規則第四條：
bfc的區域不會與float box重疊。
我們可以通過通過觸發main生成bfc， 來實現自適應兩欄布局。
.main當觸發main生成
bfc後，這個新的bfc不會與浮動的aside重疊。因此會根據包含塊的寬度，和aside的寬度，自動變窄。效果如下：
2. 清除內部浮動
<頁面：style
>
.par
.child
style
>
<
body
>
<
div
class
="par"
>
<
div
class
="child"
>
div>
<
div
class
="child"
>
div>
div>
body
>
根據bfc布局規則第六條：
計算bfc的高度時，浮動元素也參與計算
為達到清除內部浮動，我們可以觸發par生成bfc，那麼par在計算高度時，par內部的浮動元素child也會參與計算。
**：
.par3. 防止垂直 margin 重疊
兩個p之間的距離為100px，傳送了margin重疊。
根據bfc布局規則第二條：
我們可以在p外面包裹一層容器，並觸發該容器生成乙個box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊
bfc。那麼兩個p便不屬於同乙個bfc，就不會發生margin重疊了。
**：
<效果如下:style
>
.wrap
p style
>
<
body
>
<
p>haha
p>
<
div
class
="wrap"
>
<
p>hehe
p>
div>
body
>
其實以上的幾個例子都體現了bfc布局規則第五條：
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
bfc內部的元素和外部的元素絕對不會互相影響，因此， 當bfc外部存在浮動時，它不應該影響bfc內部box的布局，bfc會通過變窄，而不與浮動有重疊。同樣的，當bfc內部有浮動時，為了不影響外部元素的布局，bfc計算高度時會包括浮動的高度。避免margin重疊也是這樣的乙個道理。 BFC 神奇背後的原理
bfc 是box formatting context的縮寫。bfc 定義 bfc block formatting context 直譯為 塊級格式化上下文 它是乙個獨立的渲染區域，只有block level box參與，它規定了內部的block level box如何布局，並且與這個區域外部毫不...
前端精選文摘 BFC 神奇背後的原理
bfc 已經是乙個耳聽熟聞的詞語了，網上有許多關於 bfc 的文章，介紹了如何觸發 bfc 以及 bfc 的一些用處 如清浮動，防止 margin 重疊等 雖然我知道如何利用 bfc 解決這些問題，但當別人問我 bfc 是什麼，我還是不能很有底氣地解釋清楚。於是這兩天仔細閱讀了css2.1 spec...
前端精選文摘 BFC 神奇背後的原理
bfc 已經是乙個耳聽熟聞的詞語了，網上有許多關於 bfc 的文章，介紹了如何觸發 bfc 以及 bfc 的一些用處 如清浮動，防止 margin 重疊等 雖然我知道如何利用 bfc 解決這些問題，但當別人問我 bfc 是什麼，我還是不能很有底氣地解釋清楚。於是這兩天仔細閱讀了css2.1 spec...