什么是BFC

BFC 全稱 block formatting context，中文譯作「塊格式化上下文」。

MDN 解釋

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。

下列方式會創(chuàng)建塊格式化上下文：

• 根元素或包含根元素的元素
• 浮動元素（元素的 float不是none）
• 絕對定位元素（元素的 [position] 為 absolute 或 fixed）
• 行內(nèi)塊元素（元素的 display 為 inline-block）
• 表格單元格（元素的 display為 table-cell，HTML表格單元格默認(rèn)為該值）
• 表格標(biāo)題（元素的 display 為 table-caption，HTML表格標(biāo)題默認(rèn)為該值）
• 匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認(rèn)屬性）或 inline-table）
• overflow 值不為 visible 的塊元素
• display 值為 flow-root 的元素
• contain 值為 layout、content或 strict 的元素
• 彈性元素（display為 flex 或 inline-flex元素的直接子元素）
• 網(wǎng)格元素（display為 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
• column-span 為 all 的元素始終會創(chuàng)建一個新的BFC，即使該元素沒有包裹在一個多列容器中（標(biāo)準(zhǔn)變更）。

塊格式化上下文包含創(chuàng)建它的元素內(nèi)部的所有內(nèi)容。

BFC的功能

BFC布局規(guī)則：

• 內(nèi)部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
• 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
• BFC的區(qū)域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算

爸爸管兒子（包裹浮動元素）

用 BFC 包住浮動元素。(這不是清除浮動，.clearfix 才是清除浮動）

<div class="parent">
  <div class="son">
  </div>
</div>

.parent{
  border:10px solid red;
  min-height: 10px;
}
//flow-root 觸發(fā) BFC
.son{
  background: green;
  float:left;
  width: 400px;
  height: 100px;
}

此時父元素“parent”沒有創(chuàng)建BFC，子元素是浮動的，所以包不住，我們給它加上一條“display:flow-root”屬性，使其觸發(fā)BFC：

<div class="parent">
  <div class="son">
  </div>
</div>


.parent{
  border:10px solid red;
  min-height: 10px;
  display: flow-root;
}
//flow-root 觸發(fā) BFC
.son{
  background: green;
  float:left;
  width: 400px;
  height: 100px;
}

父元素獲得BFC之后立馬包裹住了浮動的子元素，因此在計算BFC的高度時，浮動元素也要參與計算。

兄弟之間劃清界限

有一對兄弟 div，其中一個加了浮動，那么兩個 div 會重疊一部分。

<div class="gege">哥哥</div>
<div class="didi">弟弟</div>

.gege{
  width: 100px;
  min-height: 600px;
  border: 3px solid red;
  float: left;
  margin-right: 20px;
}

.didi{
  min-height: 600px;
  border: 5px solid green;
}

讓另一個 div 創(chuàng)建 BFC，那么這兩者就會界限分明。

<div class="gege">哥哥</div>
<div class="didi">弟弟</div>

.gege{
  width: 100px;
  min-height: 600px;
  border: 3px solid red;
  float: left;
  margin-right: 20px;
}

.didi{
  min-height: 600px;
  border: 5px solid green;
  display: flow-root;
}

清除浮動

• BFC 和清除浮動沒什么關(guān)系，是兩個不同的東西。
• 如需清除浮動，請在父元素加 clearfix

<div class="parent clearfix">
  <div ></div>
</div>

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

總結(jié)

不要試圖講清楚BFC是什么，因為BFC是一個比較難定義的東西，關(guān)于BFC是什么最好通過例子來回答：

• 用BFC可以做清除浮動該做的東西，用BFC可以包住浮動元素。
• 用BFC可以使兩個相鄰元素互不干擾，做左右自適應(yīng)布局。