MDN 對(duì) BFC 的描述：
塊格式化上下文（Block Formatting Context孤澎，BFC） 是Web頁面的可視化CSS渲染的一部分届氢，是布局過程中生成塊級(jí)盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域亥至。
往下接著看看：
下列方式會(huì)創(chuàng)建塊格式化上下文：
- 根元素或包含根元素的元素
- 浮動(dòng)元素（元素的 float 不是 none）
- 絕對(duì)定位元素（元素的 position 為 absolute 或 fixed）
- 行內(nèi)塊元素 （元素的 display 為 inline-block）
- 表格單元格（元素的 display 為 table-caption）
- 具有overflow 且值不是 visible 的塊元素悼沈，
- display: flow-root
- column-span: all 應(yīng)當(dāng)總是會(huì)創(chuàng)建一個(gè)新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個(gè)多列容器中姐扮。
好像有那么點(diǎn)意思絮供，就是說如果符合以上情況，就會(huì)創(chuàng)建 BFC 咯茶敏？
先不管那么多壤靶，寫個(gè)demo試試看：
上面代碼，當(dāng)我們給子元素一個(gè)高度時(shí)惊搏，父元素會(huì)將子元素包裹住贮乳。
但是，當(dāng)我們給子元素一個(gè)左浮動(dòng)后恬惯，子元素脫離文檔流就跑出去了向拆。
上面代碼，當(dāng)我們也給父元素加上一個(gè)左浮動(dòng)后（滿足 float 不為 none）酪耳，觸發(fā)了 BFC浓恳，成功創(chuàng)建了塊格式化上下文，父元素重新包裹住了子元素碗暗。
上面代碼颈将，當(dāng)我們讓父元素絕對(duì)定位后也觸發(fā)了 BFC。
上面代碼滿足元素的 display 為 inline-block的條件言疗，所以觸發(fā)了 BFC晴圾。
再結(jié)合 MDN 的描述：
創(chuàng)建了塊格式化上下文的元素中的所有內(nèi)容都會(huì)被包含到該BFC中。
這下就清楚多了噪奄，BFC 可以用來包住浮動(dòng)元素（不是清除浮動(dòng)喲）死姚。就算子元素再怎么折騰，也不會(huì)影響外部元素了勤篮。
話說回來知允，雖然我可以通過給父元素加 float 等條件觸發(fā) BFC，但是給父元素加 float 這個(gè)行為本身會(huì)不會(huì)影響別的元素呢叙谨？我可不想拆東墻補(bǔ)西墻温鸽。。手负。
于是涤垫，一個(gè)新的屬性display: flow-root誕生了！＞怪铡蝠猬！
這個(gè)屬性的功能就一個(gè)：觸發(fā) BFC
只需給元素加上
display: flow-root就能觸發(fā) BFC。
既然說 BFC 能夠包住浮動(dòng)元素统捶，那么我是不是可以利用這一點(diǎn)進(jìn)行布局呢榆芦？
上面代碼柄粹，當(dāng)
slide-bar左浮時(shí)，會(huì)脫離文檔流匆绣，和main發(fā)生重疊驻右。你也許會(huì)說，給main也加個(gè)左浮吧崎淳，看代碼：
沒錯(cuò)堪夭，由于沒有寬度，我的
main被擠扁了拣凹。森爽。。那為什么不加個(gè)寬度呢嚣镜？這樣我的
main就不能自適應(yīng)了呀（敲黑板Ｅ莱佟）BFC 完美的解決了這個(gè)問題：
上面代碼，利用 BFC 使兩個(gè)兄弟元素互不干涉菊匿，實(shí)現(xiàn)了左右自適應(yīng)布局雕旨。
總的來說，你可以這樣理解 BFC：
功能一：爸爸管兒子
功能二：兄弟之間劃清界限
