前言

說起BFC，一些不熟悉的童鞋往往會有兩種情況：1. 用了BFC但是不知道有這回事，2.請教過大佬聽過BFC大名然後CV了一段overflow: hidden解決了問題然後不刨根問底，筆者曾經也是其中的一員。思維不清晰腫麼辦？問谷歌娘唄～看了好多文章，知道自己沒有過目不忘的本事，還是覺得要自己動手寫寫，一來加深印象，二來方便日後追溯，故撰此文。

什麼是BFC？

w3c是這麼解釋的：

​ 浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容建立新的塊級格式化上下文

(block formatting context)。

請注意，BFC並不是一個css屬性，也不是一段程式碼，而是css中基於box的一個佈局物件和單位，它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。明確地，它是一個獨立的盒子，並且這個獨立的盒子內部佈局不受外界影響，當然，BFC也不會影響到外面的元素。

成為BFC的條件

其實在w3c規範中已經簡單羅列了稱為BFC的基本條件，但我們還是詳細說明下，保持記憶脈絡清晰。

一個BFC是一個HTML盒子並且至少滿足下列條件中的任何一個：

1. float的值不為none
2. position
   的值不為static或者relative
3. display的值為 table-cell, table-caption, inline-block,flex, 或者 inline-flex中的其中一個
4. overflow的值不為visible
5. 根元素

BFC的特性

BFC的特性可以總結為以下幾點：
1. BFC內部，盒子由上至下按順序進行排列，其間隙由盒子的外邊距決定，並且，當同一個BFC中的兩個盒子同時具有相對方向的外邊距時，其外邊距還會發生疊加(Margin Collapse)
2. BFC內部，無論是浮動盒子還是普通盒子，其左總是與包含塊的左邊相接觸（從右到左的的格式，否則為與右邊框相接觸）
3. BFC 區域不會

觸發BFC

根據成為BFC的條件，一般有以下4種方法觸發BFC：

1. display: table 前後帶有換行符，我們一般也不常用
2. overflow: scroll 可能會出現不想要的滾動條，醜
3. float: left 萬一我們不想讓元素浮動呢？
4. overflow: hidden 比較完美的建立BFC的方案，副作用較小，彷彿遇到了我的心動女生

BFC能解決的問題

1. 解決margin collapse(外邊距疊加)

什麼是外邊距疊加？複述一遍：

當同一個BFC中的兩個盒子同時具有相對方向的外邊距時，外邊距會發生疊加(Margin Collapse)，當兄弟盒子的外邊距不一樣時，將以最大的那個外邊距為準。

如上述展示，我們將內部灰色盒子的垂重margin設定為和自身高度一樣，按自然思維兩個盒子之間的距離應該是兩個盒子的高度，由於外邊距疊加，只剩下一個身位的高度。

要解決上述問題，設想：如果他們屬於不同的BFC，他們之間的外邊距將不會摺疊。我們給其中的一個盒子外部包裹一層父盒子，併成為一個BFC。

現在可以清楚地看到，第一個盒子由於不再和其他其他同類名盒子在同一個BFC中，它和第二個盒子的外邊距並沒有發生疊加

總的來講，外邊距疊加本身是由BFC引起的，但是現在我們要用BFC來解決這個問題，頗有點以毒攻毒的味道。

2.清除浮動

想想那些年我們一起清除過的浮動，解決方式是什麼？clear: both？父元素一起浮動？這些都沒錯，但是作為前端開發者，我們解決問題應該需要掌握多種技能，以適應多種不同的問題環境，偶爾還可以裝裝X:)

我們往往會遇到這樣一種情況，父元素高度自適應，子元素浮動，因為不在同一文件流中，父元素的高度會坍塌，如下所示：

這個時候，我們可以利用BFC來解決問題，根據是：計算BFC高度的時候，浮動元素的高度也計算在內

我們通過新增overflow: hidden，在容器中建立一個新的BFC，效果如下：

只需要新增一個屬性，效果不錯吧～

3.實現兩欄佈局

一般的後臺管理系統，很多都是傳統的左選單右內容的兩欄佈局，我們經常會選擇左欄浮動，右邊設定左padding或者margin的思路來實現這一做法，其實利用BFC也可以建立兩欄佈局，根據是：BFC 區域不會與float box區域相疊加

簡單吧～

結尾

前端知識網路錯綜複雜，包括各種hack和黑科技，難免疏漏，或有不對之處，歡迎交流