時常會在一些技術社區刷到前端面試內容，很多大公司都熱衷於去問 BFC 相關概念。
那麼究竟什麼是 BFC，它有哪些規則，原理又是怎樣？不著急，我們一步步深入瞭解。
一、什麼是 BFC
W3C對BFC的定義如下：
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。
一個環境中的元素不會影響到其它環境中的佈局。
為了讓我們有個感性的認識，舉個不太合適的例子：
你可以把一個頁面想象成大的集裝箱，這個集裝箱裡裝的貨物就是HTML元素。在現實生活中為了避免不同人的貨物相互混淆，都是把貨物打好包裝再裝入集裝箱，這樣的話無論你包裝裡面的貨物怎麼擺放，都不會影響到其他人的貨物。
二、具體規則
一個HTML元素要創建BFC，則滿足下列的任意一個或多個條件即可：
1.float的值不是none
2.position的值不是static或者relative
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow的值不是visible
三、BFC 原理
當你一口氣說完上面那幾種情況後，面試官陰下臉，BFC 的原理是什麼？
這是個有意思的問題，W3C上只列舉了這幾種情況，我們可以把它歸為佈局常識。
然而，這麼多條目，並不好記。這就需要我們深入理解原理，這樣按照場景化記憶，就不用再死記硬背了。
1.BFC 可以包含浮動的元素（清除浮動）
浮動元素是會脫離文檔流的(絕對定位元素會脫離文檔流)。如果一個沒有高度或者height是auto的容器的子元素是浮動元素，則該容器的高度是不會被撐開的。
我們通常會利用偽元素(:after或者:before)來解決這個問題。
如果瞭解 BFC，那麼這個問題就迎刃而解了。
2.BFC 可以阻止元素被浮動元素覆蓋
如上圖所示，對於浮動元素，可能會造成文字環繞的情況(Figure1)，但這並不是我們想要的佈局(Figure2才是想要的)。
要解決這個問題，我們可以用外邊距，但也可以用 BFC。
3.避免外邊距摺疊
BFC可能造成外邊距摺疊，也可以利用它來避免這種情況。BFC產生外邊距摺疊要滿足一個條件：兩個相鄰元素要處於同一個BFC中。
所以，若兩個相鄰元素在不同的BFC中，就能避免外邊距摺疊。
四、總結
按照上文所說，我們來總結一下 BFC 的這幾種情況，大概分為兩類：
1.對容器佈局有影響，脫離文檔流類
float，position，display
display 改變容器類：flex，grid，inline-block，table-cell 等
2.滾動區域、佔位隱藏
overflow 不為 visible 情況，其實就是 scroll、hidden、auto之類會形成 BFC。
1.
2.
3.
閱讀更多 F2EAwesome 的文章
