前言
BFC在css的學習中是重要的但不易理解的概念，BFC也牽扯了很多其他問題，如浮動、定位、盒模型等，因此弄懂BFC是很有必要的。本文對BFC進行總結，希望對你有所幫助。
BFC是什么?
先看看MDN的定義：
塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。
官方文檔的說法很難理解，查閱多方資料后，得到以下的結論：
BFC(block formatting context)塊級格式化上下文，它是頁面中的一塊渲染區域，并且有一套屬于自己的渲染規則，它決定了元素如何對齊內容進行布局，以及與其他元素的關系和相互作用。 當涉及到可視化布局的時候，BFC提供了一個環境，html元素在這個環境中按照一定規則進行布局
簡短的總結：BFC是一個獨立的布局環境，BFC內部的元素布局與外部互不影響
BFC的布局規則
- 內部的Box會在垂直方向一個接著一個地放置。
- Box垂直方向上的距離由margin決定。屬于同一個BFC的兩個相鄰的Box的margin會發生重疊。
- 每個盒子的左外邊框緊挨著包含塊的左邊框，即使浮動元素也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然。
- 計算BFC的高度時，浮動子元素也參與計算。
如何觸發BFC?
這里只記錄常用方法，想要了解全部觸發BFC的方法請點擊此鏈接
元素或屬性屬性值根元素floatleft、rightpositionabsolute、fixedoverflowauto、scroll、hiddendisplayinline-block、table-cell
BFC可以解決哪些問題?
- 解決浮動元素令父元素高度坍塌的問題方法：給父元素開啟BFC原理：計算BFC的高度時，浮動子元素也參與計算演示：
- 非浮動元素被浮動元素覆蓋方法：給非浮動元素開啟BFC原理：BFC的區域不會與float box重疊演示：
- 兩欄自適應布局方法：給固定欄設置固定寬度，給不固定欄開啟BFC。原理：BFC的區域不會與float box重疊演示：
- 外邊距垂直方向重合的問題方法：給上box或者下box任意一個包裹新的box并開啟BFC原理：屬于同一個BFC的兩個相鄰的Box的margin會發生重疊。演示：
結語
以上就是本文關于BFC的全部內容，如果有不正確的地方，歡迎大家指正。碼字不易，且贊且珍惜。
