BFC 及其應用 - JavaShuo

這是我參與更文挑戰的第 10 天，活動詳情查看：更文挑戰css

塊格式化上下文（Block Formatting Context，BFC） 是 Web 頁面的可視化 CSS 渲染的一部分。它是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互限定區域。html

BFC 特性

只要元素知足下面任一條件便可觸發 BFC 特性（詳細）：markdown

當父元素沒有設置高度，且子元素爲浮動元素的狀況下，父元素會發生高度坍塌，上下邊界重合，即浮動元素沒法撐開父元素。ide

<div class="parent">
  <div class="child"></div>
</div>
複製代碼

給子元素設置浮動：oop

.child {
  float: left;
}
複製代碼

能夠看到，子元素浮動後，父元素失去了高度。佈局

爲了解決浮動元素形成的父元素高度塌陷問題，能夠將父元素設置成一個 BFC 來清除浮動，將父元素總體設置爲 BFC 環境post

.parent {
  overflow: auto;
}
複製代碼

<div class="box1"></div>
<div class="box2"></div>
複製代碼

給第一個盒子 box1 設置浮動：ui

.box1 {
  float: left;
}
複製代碼

能夠看到，因爲 box1 發生浮動，box2 未發生浮動，而浮動元素因爲脫離文檔流，第一個盒子堆疊在第二個盒子上。spa

爲了讓兩個元素不重疊，咱們把右邊的盒子設置成 BFC：

.box2 {  
  overflow: hidden;
}
複製代碼

在標準文檔流中，毗鄰的兩個或多個塊級元素之間垂直方向的 margin 會合併成一個 margin，會取兩個元素 margin 最大的那一個，這就是外邊距重疊。

有三種狀況會造成外邊距重疊（Margin collapsing）：

而建立了塊級格式化上下文（BFC）的元素，不會和它的子元素髮生 margin 重疊。

咱們能夠使用例如 overflow：hidden 來產生一個 BFC 環境來解決該問題。

<div></div>
<div></div>
複製代碼

給兩個 <div> 元素設置外邊距：

div {
  margin: 50px;
}
複製代碼

能夠看到，第一個元素的下邊距和第二個元素的上邊距發生了重疊。

解決邊距重疊的問題，能夠將其放在不一樣的 BFC 容器中。

<div class="container">
  <div></div>
</div>

<div class="container">
  <div></div>
</div>
複製代碼

由於 BFC 是一個獨立的容器，容器內外互不影響。