BFC學習筆記

概念（來自MDN）

BFC即block formatting context(塊級格式化上下文)，是 Web 頁面的可視化 CSS 渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其餘元素交互的區域。

我的理解：在某些條件（造成BFC的條件）下，一個元素及其子元素擁有特定的渲染規則，此時咱們稱該元素造成一個BFC。

造成條件(知足如下任何一種便可)

• 根元素(html)

• 浮動元素（元素的 float 不是 none）

• 絕對定位元素（元素的 position 爲 absolute 或 fixed）

• overflow 值不爲 visible 的塊元素

• display 爲 inline-block flex grid table-cell 等（具體參見塊格式化上下文）

BFC的渲染規則（和塊級元素的區別）

1. 屬於同一個 BFC 內部的 box 的垂直 margin 會發生重疊

2. BFC 是個獨立的容器，容器裏面的子元素不會影響外面的元素，反之亦然

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

理解 BFC 後能夠解決的問題

1. 阻止外邊距重疊

HTML

<div class="box">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

box {
  width: 100vw;
  background: skyblue;
}

.child {
  margin: 10px;
  width: 100px;
  height: 100px;
  background: deeppink;
}

此時兩個 child 元素屬於同一個 BFC（根元素html）內，根據 BFC 規則1，外邊距會發生重疊。咱們可使他們在不一樣的 BFC 中，就不會重疊了

CSS

.child:last-child {
  display: inline-block;
}

2. 阻止元素和 float box 重疊

HTML

<div class="box">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

box {
  width: 100vw;
  background: skyblue;
}

.child {
  margin: 10px;
  width: 100px;
  height: 100px;
  background: deeppink;
}

.child:first-child {
  float: left;
}

根據 BFC 規則2，此時兩個 child 會發生重疊，爲了阻止重疊，咱們能夠爲另外一個非浮動元素建立 BFC

CSS

.child:last-child {
  overflow: hidden;
}

3. 清除浮動，防止容器高度塌陷

HTML

<div class="box">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

box {
  width: 100vw;
  background: skyblue;
}

.child {
  float: left;
  width: 100px;
  height: 100px;
  background: deeppink;
}

此時容器 box 的高度爲 0，由於浮動的元素不參與高度計算，形成了該容器高度塌陷。根據 BFC 規則3，能夠利用 BFC 元素下的浮動元素參與高度計算來清除浮動。

CSS

box {
  width: 100vw;
  overflow: hidden;
  background: skyblue;
}

4. 能夠利用 BFC 完成自適應兩欄佈局

HTML

<div class="box">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

box {
  width: 100vw;
  background: skyblue;
}

.child {
  height: 100px;
  background: deeppink;
}

.child:first-child {
  float: left;
  width: 100px;
}

.child:;ast-child {
  overflow: hidden;
}

實際也是利用了 BFC 規則2，BFC 元素不會和 float box 重疊

總結

其實咱們在日常的工做中常常和 BFC 打交道，如外邊距摺疊，設置 overflow:hidden 清除浮動，自適應兩列布局。可是不少人包括我本身對於 BFC 只是據說過概念，並不清楚其造成條件和渲染規則。今天經過寫博客的方式讓本身對其有了更清晰的認識，但願你們看完這篇文章後對 BFC 也能夠有個清晰的瞭解和認識。其中如有錯誤的地方也但願能夠幫忙指出。

參考

• 佈局概念 關於CSS-BFC深刻理解

• 前端精選文摘：BFC 神奇背後的原理

• 深刻理解BFC

---

歡迎到前端學習打卡羣一塊兒學習～516913974