3分鐘學會BFC
阿新 • • 發佈：2021-12-24
BFC的簡介
BFC(Block Formatting Context) 塊級格式化上下文，是用於佈局塊級盒子的一塊渲染區域。 MDN上的解釋：BFC是Web頁面 CSS 視覺渲染的一部分，用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。 一個BFC的範圍包含建立該上下文元素的所有子元素，但不包括建立了新BFC的子元素的內部元素。這從另一方角度說明，一個元素不能同時存在於兩個BFC中。 具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在佈局上影響到外面的元素 通俗一點來講，可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。
BFC的形成
只要元素滿足下面任一條件即可觸發 BFC 特性：
- 根元素(即
<html>標籤) - 浮動元素 float 不為 none （為
left、right） - 絕對定位元素 position 不為 static 或 relative。（為
absolute、fixed） - overflow 的值不為 visible 的塊元素(為
auto、scroll、hidden) - display 的值為
inline-block、flex、grid、table、table-cell、table-caption..
BFC的特性
- 屬於同一個BFC的兩個相鄰容器的上下margin會重疊（重點）
- 計算BFC高度時浮動元素也參於計算（重點）
- BFC的區域不會與浮動容器發生重疊（重點）
- BFC內的容器在垂直方向依次排列
- 元素的margin-left與其包含塊的border-left相接觸
- BFC是獨立容器，容器內部元素不會影響容器外部元素