關於CSS中重要的BFC詳解

本文我們主要和大家分享關於CSS中重要的BFC詳解，CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。

1. 簡介

在解釋BFC之前，先說一下文件流程。我們常說的文檔流其實分為定位流、浮動流、普通流三種。而普通流其實就是指BFC中的FC。 FC(Formatting Context)，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何佈局，以及和其他元素之間的關係和作用。常見的FC有BFC、IFC，還有GFC和FFC。

BFC(Block Formatting Context)區塊層級格式化上下文，是用於佈局區塊層級盒子的一塊渲染區域，或者說是在一定條件下的一種渲染規則。

MDN上的解釋：BFC是Web頁面的可視化CSS渲染的部分，是區塊級盒子佈局發生的區域，也是浮動元素與其他元素互動的區域。

2. BFC觸發方式

1. 根元素，即HTML標籤

2. float的值不為none，為left、right

3. overflow值不為visible，為auto、scroll、hidden

4. display值為inline-block、table-cell、table-caption# 、flex、inline-flex、grid、inline-grid

5. ##position值為

   absolute、fixed

注意：display:table也可以產生BFC的原因在於Table會預設生成一個匿名的table-cell，是這個匿名的table-ccell產生了BFC。

3. 約束規則

瀏覽器對BFC區域的約束規則：

1. 產生BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含區塊的頂部，兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的區塊級元素的外邊距會折疊(Mastering margin collapsing)。

2. 產生BFC元素的子元素中，每個子元素左外邊距與包含區塊的左邊界相接觸（對於從右到左的格式化，右外邊距接觸右邊界），即使浮動元素也是如此（儘管子元素的內容區域會由於浮動而壓縮），除非這個子元素也創建了一個新的BFC（如它本身也是一個浮動元素）。

規則解讀：

1. 內部的Box會在垂直方向上一個接一個的放置

2. #內部的Box垂直方向上的距離由margin決定。 （完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生折疊，不同BFC不會發生折疊。）

3. 每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。 （這表示BFC中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）

4. BFC的區域不會與float的元素當區域重疊

5. 計算BFC的高度時，浮動子元素也參與計算

#4. 作用

BFC是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面元素，反之亦然。我們可以利用BFC的這個特性來做很多事。

4.1 阻止元素被浮動元素覆蓋

一個正常文件流的block元素可能被一個float元素覆蓋，擠佔正常文件流，因此可以設定一個元素的float、display、position值等方式觸發BFC，以阻止被浮動盒子覆蓋。

查看DEMO

4.2 可以包含浮動元素

透過改變包含浮動子元素的父盒子的屬性值，觸發BFC，以此來包含子元素的浮動盒子。

查看DEMO

4.3 阻止相鄰元素的margin合併

屬於同一個BFC的兩個相鄰區塊級子元素的上下margin會發生重疊，(設定writing-mode :tb-rl時，水平margin會發生重疊)。所以當兩個相鄰區塊級子元素分屬於不同的BFC時可以阻止margin重疊。

這裡給任一個相鄰塊級盒子的外麵包一個p，透過改變此p的屬性使兩個原盒子分屬於兩個不同的BFC，以此來阻止margin重疊。

查看DEMO

但這裡有個疑問：如果外麵包一層p，設定能觸發BFC的任何屬性都能阻止相鄰元素的margin合併。因為分屬不同BFC不會發生margin合併。
而如果外面不包一個p的話，當設定display為inline-block、inline-flex、table-captain，和position為absolute、fixed，float為left、right是可以阻止margin合併的。這裡問題來了：

我們知道設定position和float會讓元素脫離文檔流並且又創建新的BFC，所以兩個元素就不是相鄰元素了，因此可以阻止相鄰元素margin合併，但是inline-block、inline-flex 、inline-grid、table-captain為什麼可以呢？如果有人知道為什麼，請告知~

相關推薦：

CSS中潛藏著的BFC

##什麼是BFC？對bfc的簡單理解

浮動的定義與浮動的清除(BFC)

以上是關於CSS中重要的BFC詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！