大家好，我是前端西瓜哥。今天來學(xué)習(xí) BFC。

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

BFC 是 Web 頁面 CSS 渲染的一個(gè)機(jī)制，是塊級(jí)盒子布局中產(chǎn)生的區(qū)域。

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

怎樣的元素屬于 BFC?

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

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

目前來說，最常見的是通過 overflow: hidden 來構(gòu)建 BFC。一般情況下，它的副作用最小。但如果元素下有超出盒子范圍的內(nèi)容，會(huì)被截掉，請(qǐng)謹(jǐn)慎使用。

BFC 的特性

BFC 主要有兩個(gè)特性，我們來學(xué)習(xí)一下。

特性1：上下外邊距重疊

同一個(gè) BFC 下的兩個(gè)相鄰塊級(jí)元素，會(huì)發(fā)生上下方向的 margin 重疊。

比如前一個(gè) div 設(shè)置了 margin-bottom: 20px，下一個(gè) div 設(shè)置了 margin-top: 10px，然后你會(huì)發(fā)現(xiàn)它們的上下距離其實(shí)是 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>

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

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

因?yàn)?overflow: hidden 有副作用，所以在實(shí)際開發(fā)中，我更喜歡用 padding 來替代 margin。

特性 2：浮動(dòng)元素也會(huì)參與計(jì)算高度

浮動(dòng)，是非常奇怪的一種效果。效果類似 word 的文字環(huán)繞排版，可以讓文字和內(nèi)聯(lián)樣式環(huán)繞著它。

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

浮動(dòng)元素脫離了正常文檔流，一般情況下，計(jì)算容器元素的高度時(shí)，是考慮浮動(dòng)元素的高度的。

但 BFC 可以強(qiáng)行讓浮動(dòng)元素參與計(jì)算。

<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 應(yīng)用 BFC，會(huì)導(dǎo)致容器元素高度塌陷，效果見下圖左邊。

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

結(jié)尾

BFC 主要掌握它的兩個(gè)特性就好了：

• 上下外邊距重疊。
• 浮動(dòng)元素參與 BFC 高度計(jì)算。