CSS規(guī)范中對 BFC 的描述
9.4.1 塊格式化上下文
浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不為'visible'的塊盒會為它們的內(nèi)容建立一個新的塊格式化上下文
在一個塊格式化上下文中，盒在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由'margin'屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并
在一個塊格式化上下文中，每個盒的left外邊（left outer edge）挨著包含塊的left邊（對于從右向左的格式化，right邊挨著）。即使存在浮動（盡管一個盒的行盒可能會因為浮動收縮），這也成立。除非該盒建立了一個新的塊格式化上下文（這種情況下，該盒自身可能會因為浮動變窄）
MDN 對 BFC 的描述
一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現(xiàn)的區(qū)域，也是浮動層元素進行交互的區(qū)域。
一個塊格式化上下文由以下之一創(chuàng)建：
- 根元素或其它包含它的元素
- 浮動元素 (元素的 float 不是 none)
- 絕對定位元素 (元素具有 position 為 absolute 或 fixed)
- 內(nèi)聯(lián)塊 (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
- 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認屬性)
- 具有overflow 且值不是 visible 的塊元素，
- display: flow-root
- column-span: all 應(yīng)當(dāng)總是會創(chuàng)建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。
一個塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容，除了被包含于創(chuàng)建新的塊級格式化上下文的后代元素內(nèi)的元素。
塊格式化上下文對于定位 (參見 float) 與清除浮動 (參見 clear) 很重要。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。浮動不會影響其它塊格式化上下文中元素的布局，并且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。
張鑫旭對 BFC 的描述
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。啪啦啪啦特性什么的，一言難盡，大家可以自行去查找，我這里不詳述，免得亂了主次，總之，記住這么一句話：BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。所以，避免margin穿透啊，清除浮動什么的也好理解了。
媽的，BFC 到底是什么？
先思考一個問題：
請問：什么是色情？
聯(lián)邦最高法院大法官斯圖爾特更有一句名言
我不知道什么是色情，不過，我看了之后，就能知道
類似地：
- 我不知道什么是 BFC
- 但是你寫出樣式，我就知道這是不是 BFC
BFC 就是這樣的東西（堆疊上下文也是）
- 它沒有定義
- 它只有特性/功能
功能1：爸爸管兒子
用 BFC 包住浮動元素。(這 TM 不是清除浮動，.clearfix 才是清除浮動）
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output
功能2：兄弟之間劃清界限
用 float + div 做左右自適應(yīng)布局
http://js.jirengu.com/felikenuve/1/edit?html,css,output
BFC功能舉例
-
子元素浮動時，父元素?zé)o法包住子元素
-
用float浮動觸發(fā)BFC
-
用絕對定位觸發(fā)BFC
-
用非塊盒的塊容器觸發(fā)BFC
-
用overflow非visible觸發(fā)BFC
- 用css3的新屬性
display:flow-root；觸發(fā)BFC，并且沒有任何副作用
-
在一個塊格式化上下文中，盒在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由'margin'屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并
-
一個塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容，除了被包含于創(chuàng)建新的塊級格式化上下文的后代元素內(nèi)的元素。
-
兄弟之間劃清界限
-
margin-left:110px不是margin-left: 10px
-
用flex很好解決以上問題
總結(jié)
BFC只在面試時有用，實際操作做都可以用其他方法實現(xiàn)BFC的效果。
