一次弄懂css的BFC

前言

BFC在css的學習中是重要的但不易理解的概念，BFC也牽扯了不少其餘問題，如浮動、定位、盒模型等，所以弄懂BFC是頗有必要的。本文對BFC進行總結，但願對你有所幫助。

BFC是什麼?

先看看MDN的定義：

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其餘元素交互的區域。

官方文檔的說法很難理解，查閱多方資料後，獲得如下的結論：

BFC(block formatting context)塊級格式化上下文，它是頁面中的一塊渲染區域，而且有一套屬於本身的渲染規則，它決定了元素如何對齊內容進行佈局，以及與其餘元素的關係和相互做用。 當涉及到可視化佈局的時候，BFC提供了一個環境，HTML元素在這個環境中按照必定規則進行佈局

簡短的總結：BFC是一個獨立的佈局環境，BFC內部的元素佈局與外部互不影響

BFC的佈局規則

1. 內部的Box會在垂直方向一個接着一個地放置。
2. Box垂直方向上的距離由margin決定。屬於同一個BFC的兩個相鄰的Box的margin會發生重疊。
3. 每一個盒子的左外邊框緊挨着包含塊的左邊框，即便浮動元素也是如此。
4. BFC的區域不會與float box重疊。
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然。
6. 計算BFC的高度時，浮動子元素也參與計算。

如何觸發BFC?

這裏只記錄經常使用方法，想要了解所有觸發BFC的方法請點擊此連接

元素或屬性	屬性值
根元素
float	left、right
position	absolute、fixed
overflow	auto、scroll、hidden
display	inline-block、table-cell

BFC能夠解決哪些問題?

1. 解決浮動元素令父元素高度坍塌的問題

   方法：給父元素開啓BFC

   原理：計算BFC的高度時，浮動子元素也參與計算

   演示：

   

2. 非浮動元素被浮動元素覆蓋

   方法：給非浮動元素開啓BFC

   原理：BFC的區域不會與float box重疊

   演示：

3. 兩欄自適應佈局

   方法：給固定欄設置固定寬度，給不固定欄開啓BFC。

   原理：BFC的區域不會與float box重疊

   演示：

4. 外邊距垂直方向重合的問題

   方法：給上box或者下box任意一個包裹新的box並開啓BFC

   原理：屬於同一個BFC的兩個相鄰的Box的margin會發生重疊。

   演示：

結語

以上就是本文關於BFC的所有內容，若是有不正確的地方，歡迎你們指正。碼字不易，且贊且珍惜。

參考

BFC官方文檔