BFC（塊級 格式化上下文）的理解

 

 

本文轉載（http://www.javashuo.com/article/p-mbnnjsqn-cx.html）

一.BFC的概念

 

---

1.規範解釋

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

2.通俗解釋：

• BFC 是一個獨立的佈局環境,能夠理解爲一個容器,在這個容器中按照必定規則進行物品擺放,而且不會影響其它環境中的物品。
• 若是一個元素符合觸發BFC的條件，則該元素中的佈局不受外部影響。
• 浮動元素會建立BFC，因此浮動元素內部子元素主要受浮動元素影響，兩個浮動元素之間是互不影響的。

二.建立BFC

 

---

 

1. 根元素或包含根元素的元素
2. 浮動元素 float ＝ left | right 或 inherit（≠ none）
3. 絕對定位元素 position ＝ absolute 或 fixed
4. display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
5. overflow ＝ hidden | auto 或 scroll (≠ visible)

三.BFC的特性

---

 

1. BFC 是一個獨立的容器，容器內子元素不會影響容器外的元素。反之亦如此。
2. BFC盒子之間垂直的間距是由 margin 決定的。
3. 在同一個 BFC 中，兩個相鄰的塊級盒子的垂直外邊距會發生重疊。
4. BFC 區域不會和 float box 發生重疊。
5. BFC 可以識別幷包含浮動元素，當計算其區域的高度時，浮動元素也能夠參與計算了。

四.BFC的做用

---

1.包含浮動元素 （清除浮動）

• 浮動元素會脫離文檔流(絕對定位元素也會脫離文檔流)，致使沒法計算準確的高度，這種問題稱爲高度塌陷。
• 解決高度塌陷問題的前提是可以識別幷包含浮動元素，也就是清除浮動。

問題舉例：如上左圖所示，容器（container）沒有高度或者 height = auto ,而且其子元素（sibling）是浮動元素，因此該容器的高度是不會被撐開的，即高度塌陷。

解決方法：在容器（container）中建立 BFC。

HTML：

1 <div class="container">
2         <div class="Sibling"></div>
3         <div class="Sibling"></div>
4 </div>

CSS：

1 .container { 
2         overflow: hidden; /* creates block formatting context */ 
3         background-color: green; 
4 } 
5 .container .Sibling { 
6         float: left; 
7         margin: 10px;
8         background-color: lightgreen;  
9 }

特別提示：

• 經過 overflow:hidden 建立 BFC，當然能夠解決高度塌陷的問題，可是大範圍應用在佈局上確定不是最合適的，畢竟 overflow:hidden 會形成溢出隱藏的問題，尤爲是與 JS 的交互效果會有影響。
• 咱們能夠使用 clearfix 實現清除浮動，這裏就很少介紹了。想了解 清楚浮動請參看另外一篇文章（http://www.javashuo.com/article/p-tfnxzaiy-dh.html）

2.BFC中的元素會產生外邊距摺疊 

　　相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的垂直邊距相遇時， 它們將造成一個外邊距。這個外邊距的高度等於兩個發生摺疊的外邊距的高度中的較大者。

HTML

1 <div class="Container"> 
2     <p>Sibling 1</p> 
3     <p>Sibling 2</p> 
4 </div>

CSS

.Container { 
    background-color: red; 
    overflow: hidden; /* creates a block formatting context */ 
} 
p { 
    background-color: lightgreen; 
    margin: 10px 0; 
}

如上圖所示：紅色盒子（Container）中包含兩個綠色的兄弟元素（P），而且紅色盒子設置 overflow: hidden; 則一個BFC 已經被建立,即致使外邊距摺疊。

理論上兩個兄弟元素之間的邊距應該是兩個元素的邊距之和（20px），但實際是 10px。這就是外邊距摺疊致使的。

2.1 摺疊外邊距的取值

• 兩個相鄰的外邊距都是 正數 時，摺疊外邊距是二者中較大的值。
• 兩個相鄰的外邊距都是 負數 時，摺疊外邊距是二者中絕對值較大的值。
• 兩個相鄰的外邊距是 一正一負 時，摺疊外邊距是二者相加的和。

2.2 摺疊外邊距產生的條件是margin必須相鄰

3.避免外邊距摺疊 

　　這一聽起來可能有些困惑，由於咱們在前面討論了 BFC 致使外邊距摺疊的問題。但咱們必須記住的是外邊距摺疊（Margin collapsing）只會發生在屬於同一BFC的塊級元素之間。若是它們屬於不一樣的 BFC，它們之間的外邊距則不會摺疊。因此經過建立一個不一樣的 BFC ，就能夠避免外邊距摺疊。

修改前面的例子並添加第三個兄弟元素，CSS不變。

HTML：

1 <div class="Container"> 
2         <p>Sibling 1</p> 
3         <p>Sibling 2</p> 
4         <p>Sibling 3</p> 
5 </div>

結果不會改變，還會摺疊外邊距，三個兄弟元素（P）將會以垂直距離爲 10px 的距離分開。緣由是三個兄弟元素都屬於同一個 BFC。

建立一個不一樣的 BFC ，就能夠避免外邊距摺疊。

HTML：

1 <div class="Container"> 
2         <p>Sibling 1</p> 
3         <p>Sibling 2</p> 
4         <div class="newBFC"> 
5             <p>Sibling 3</p> 
6         </div> 
7 </div>

CSS：

 1 .Container { 
 2     background-color: red; 
 3     overflow: hidden; /* creates a block formatting context */ 
 4 } 
 5 p { 
 6      background-color: lightgreen; 
 7      margin: 10px 0; 
 8 }
 9 .newBFC { 
 10     overflow: hidden; /* creates new block formatting context */ 
 11 }

當第二和第三個兄弟元素屬於不一樣的 BFC 時，它們之間就沒有外邊距摺疊。