CSS的格式化上下文FC(BFC，IFC，FFC，GFC)

2024-08-25科技

前言

在前端開發中，我們可以用 CSS 設定元素的樣式，美化界面，也可以用 CSS 設定元素布局，即格式化上下文( Formatting Context )，簡稱為 FC

盒模型-BOX

我們的頁面是由一個個元素組成的，渲染時會將其抽象為一個個的 盒(BOX) 進行布局渲染

元素的型別和 display 內容，決定了一個 Box 的型別

不同型別的 Box ，會參與組成不同的 FC

我們可以在瀏覽器控制台輸入以下程式碼，標註檢視當前頁面的所有盒(BOX)：

如下圖，盒子模型主要由四部份組成：

內容區(Content) ：實際內容顯示的區域，它的大小可以透過 width 和 height 內容來設定

內邊距(Padding) ：內容區與邊框之間的空間，可以透過 padding 內容來設定， padding 不透明且會影響元素的實際尺寸

邊框(Border) ：環繞在內邊距之外的邊界，可以透過 border 內容來設定，邊框的寬度會增加元素的總尺寸

外邊距(Margin) ：邊框之外的空間，可以透過 margin 內容來設定，外邊距透明並且不影響元素的實際尺寸，但會影響元素之間的距離

每個 Box 都有一個 內容區 ，並可選配 內邊距 、邊框和 外邊距 (其值可為零，邊距值可為負數)

內邊距 、邊框和 外邊距 都可分解為上下左右四個段，並且可以分開獨立控制其內容

Box-Sizing內容

box-sizing 內容規定了 Box 的計算方式：

content-box(預設值)： width 和 height 只包含內容區， 不包括內邊距、邊框和外邊距

border-box： width 和 height 包含內容區、內邊距和邊框，但 不包括外邊距

冷知識： display 內容有 32 個可選值

格式化上下文-FC

Formatting context(FC：格式化上下文) ，是 W3C CSS2.1 規範中的一個概念

它是頁面中的一塊渲染區域，並且有一套渲染規則，其決定了元素是如何排布、對齊和互動的

常見的 FC 有：

BFC — 塊級格式化上下文(Block Formatting Context)

IFC — 行內格式化上下文(Inline Formatting Context)

GFC — 網格格式化上下文(Grids Formatting Context)

FFC — 彈性盒 格式化上下文(Flexible Formatting Context)

其中，GFC和FFC就是CSS3引入的新布局模型

BFC

BFC ，即塊級格式化上下文，用於控制塊級元素布局，每個 BFC 都是一個獨立的渲染區域，元素在這個區域內按照一定的規則進行布局，互不影響

特性

外邊距折疊 ：同一個BFC內的相鄰塊級元素的上下外邊距會合並(重疊)，以較大的為準

包含浮動元素 ：BFC可以包含浮動元素，不會被浮動元素影響(利用該特性可清除浮動)，計算BFC的高度時，其內的浮動元素也參與計算

防止文字環繞浮動元素 ：BFC區域(BFC內的塊級盒子)不會與浮動元素區域重疊

建立方式

float 內容不為 none

position 內容為 absolute 或 fixed

display 內容為 inline-block 、 table-cell 、 table-caption 、 flex 、 inline-flex 、 flow 或 flow-root

overflow 內容不為 visible (即為 hidden 、 scroll 和 auto )

套用場景

清除浮動

防止外邊距折疊

包含浮動元素

套用舉例

如上圖，有a、b兩個盒子，a盒子有30的下外邊距，b盒子有50的上外邊距，兩者相鄰只展示50外邊距(即30與50重疊，展示較大的)

如不想重疊，可以給a或b外部再包圍一個父級盒子，然後將其建立為一個新的 BFC ，如下：

IFC

IFC ，即行內元素格式化上下文，按照行框模型進行布局， IFC 中的元素會水平排列成一行或多行，每一行稱為一個行框( line box )；一個 IFC 可以有多個行框

特性

水平排列 ：行內元素在水平方向上排列，直到當前行容不下更多元素為止，然後換行；水平方向的 padding 、 border 、 margin 都有效，垂直方向的不被計算

水平對齊 ：可以透過 text-align 內容來控制行內元素的水平對齊方式

浮動優先排列 ：行框的寬度是由包含塊和與其中的浮動元素來決定，一般情況從左到右按先後順序排列，但 float元素會優先排列

不破壞文件流 ：IFC不會影響塊級元素的布局，不會建立新的BFC

建立方式

行內元素或 display: inline;

套用場景

行內元素的排列和對齊

控制文字和行內元素的布局

FFC

FFC 是由 Flexbox 布局建立的格式化上下文， Flexbox 布局是一種用於 一維布局 的強大工具，可以方便地對齊和分布容器內的元素，無論是垂直還是水平方向

特性

彈性盒模型 ：在FFC中，子元素稱為彈性計畫( flex items )，它們可以根據可用空間靈活地調整自己的大小

主軸和交叉軸 ：FFC有兩個軸，主軸( main axis )和交叉軸( cross axis )，元素可以沿著這兩個軸進行排列

對齊和分布 ：可以使用各種內容如 justify-content 、 align-items 和 align-content 來控制彈性計畫的對齊和分布方式

建立方式

將 display 內容設定為 flex 或 inline-flex

套用場景

建立響應式布局

水平胡垂直居中

動態調整元素大小

GFC

GFC ，即由 Grid 布局建立的格式化上下文， Grid 布局是一種用於 二維布局 的強大工具，可以精確地控制容器內元素的排列和對齊

特性

網格模型 ：在 GFC 中，容器被劃分為行和列，子元素稱為網格計畫( grid items )，可以放置在任意網格單元格中

行和列的定義 ：可以使用 grid-template-rows 和 grid-template-columns 來定義網格的行和列

區域和單元格的對齊 ：可以使用 grid-area 、 justify-items 和 align-items 等內容來控制網格計畫的排列和對齊

建立方式

將 display 內容設定為 grid 或 inline-grid

套用場景

建立復雜的頁面布局

精確控制元素的位置和對齊

響應式設計

參考資料

CSS Box Level： https://www.w3.org/TR/css-box-3/#intro

CSS Display： https://www.w3.org/TR/css-display-3/