大家好，我是前端西瓜哥。今天來學習 BFC。

BFC，為 Block Formatting Context 的縮寫，中文翻譯為 塊格式上下文。

BFC 是 Web 頁面 CSS 渲染的一個機制，是塊級盒子布局中產生的區域。

你可以將一個 BFC 可以理解為一個容器，里面的元素不會影響到容器外的布局。

怎樣的元素屬于 BFC?

• 根元素，也就是 HTML 元素。
• 浮動元素，即使用了 float 屬性且值不為 none。
• 絕對定位元素。
• 塊級容器(如 display 的值為 inline-blocks、table-cells、table-captions)。
• overflow 的值不為 visible 的元素。
• 使用了 display: flow-root 的元素。這是新出的值，專門用來創建無副作用的 BFC。兼容性存疑，比較少用。

當然還有一些 CSS 屬性也可以觸發 BFC，但比較少見，這里就不一一列舉了，讀者可自行閱讀 MDN 文檔。

目前來說，最常見的是通過 overflow: hidden 來構建 BFC。一般情況下，它的副作用最小。但如果元素下有超出盒子范圍的內容，會被截掉，請謹慎使用。

BFC 的特性

BFC 主要有兩個特性，我們來學習一下。

特性1：上下外邊距重疊

同一個 BFC 下的兩個相鄰塊級元素，會發生上下方向的 margin 重疊。

比如前一個 div 設置了 margin-bottom: 20px，下一個 div 設置了 margin-top: 10px，然后你會發現它們的上下距離其實是 20px(二者的最大值)，而不是 30px(二者之和)。

<style>
  .box {
    width: 100px;
    height: 100px;
  }
  .b1 {
    background-color: bisque;
    margin-bottom: 20px;
  }
  .b2 {
    background-color: blueviolet;
    margin-top: 10px;
  }
</style>
<div class="box b1"></div>
<div class="box b2"></div>

如果想避免這種情況，可以給這兩個 div 裹上一個 BFC。

<style>
  .container {
    overflow: hidden;
  }
  /* ... */
</style>
<div class="container">
  <div class="box b1"></div>
</div>
<div class="container">
  <div class="box b2"></div>
</div>

因為 overflow: hidden 有副作用，所以在實際開發中，我更喜歡用 padding 來替代 margin。

特性 2：浮動元素也會參與計算高度

浮動，是非常奇怪的一種效果。效果類似 word 的文字環繞排版，可以讓文字和內聯樣式環繞著它。

當一個元素被賦予浮動效果后，它會脫落正常文檔流，向左或向右平移到所在容器的邊框(border)位置，或者碰到另一個浮動元素為止。

浮動元素脫離了正常文檔流，一般情況下，計算容器元素的高度時，是考慮浮動元素的高度的。

但 BFC 可以強行讓浮動元素參與計算。

<style>
  .container {
    /* overflow: hidden; */
    padding: 5px;
    border: 1px solid #000;
  }
  .box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
  }
</style>
<div class="container">
  <div class="box"></div>
</div>

上面的這種寫法，沒有給 container 應用 BFC，會導致容器元素高度塌陷，效果見下圖左邊。

當我們將 overflow: hidden 的注釋去除，容器元素就應用了 BFC，就能得到我們想要的容器元素根據子元素自動撐高的效果了。效果見下圖右邊。

結尾

BFC 主要掌握它的兩個特性就好了：

• 上下外邊距重疊。
• 浮動元素參與 BFC 高度計算。