第20題 什么是BFC？什么條件下會觸發？渲染規則？應用場景有哪些？

1.什么是BFC？

W3C對BFC的定義如下：

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如inline-blocks,table-cells,和table-captions），以及overflow值不為”visiable”的塊級盒子，都會為他們的內容創建新的BFC（Block Fromatting Context，即塊級格式上下文）。

2.觸發條件

一個HTML元素要創建BFC，則滿足下列的任意一個或多個條件即可： 下列方式會創建塊格式化上下文：

• 根元素()
• 浮動元素（元素的 float 不是 none）
• 絕對定位元素（元素的 position 為 absolute 或 fixed）
• 行內塊元素（元素的 display 為 inline-block）
• 表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值）
• 表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）
• 匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
• overflow 值不為 visible 的塊元素
• -彈性元素（display為 flex 或 inline-flex元素的直接子元素）
• 網格元素（display為 grid 或 inline-grid 元素的直接子元素）等等。

3.BFC渲染規則

（1）BFC垂直方向邊距重疊

（2）BFC的區域不會與浮動元素的box重疊

（3）BFC是一個獨立的容器，外面的元素不會影響里面的元素

（4）計算BFC高度的時候浮動元素也會參與計算

4.應用場景

4.1 防止浮動導致父元素高度塌陷

現有如下頁面代碼:

<style>
.container {
  border: 10px solid red;
}
.inner {
  background: #08BDEB;
  height: 100px;
  width: 100px;
}
</style>
<div class="container">
  <div class="inner"></div>
</div>

接下來將inner元素設為浮動:

.inner {
  float: left;
  background: #08BDEB;
  height: 100px;
  width: 100px;
}

會產生這樣的塌陷效果：

但如果我們對父元素設置BFC后, 這樣的問題就解決了:

.container {
    border: 10px solid red;
    overflow: hidden;
}

同時這也是清除浮動的一種方式。

4.2 避免外邊距折疊

兩個塊同一個BFC會造成外邊距折疊，但如果對這兩個塊分別設置BFC，那么邊距重疊的問題就不存在了。

現有代碼如下:

.container {
   background-color: green;
   overflow: hidden;
}

.inner {
   background-color: lightblue;
   margin: 10px 0;
}
<div class="container">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
</div>

此時三個元素的上下間隔都是10px, 因為三個元素同屬于一個BFC。 現在我們做如下操作:

  <div class="container">
    <div class="inner">1</div>
    <div class="bfc">
      <div class="inner">2</div>
    </div>
    <div class="inner">3</div>
  </div>

style增加:

.bfc{
    overflow: hidden;
}

效果如下:

以明顯地看到間隔變大了，而且是原來的兩倍，符合我們的預期。