BFC（Block Formatting Context，塊級格式化上下文）和 IFC（Inline Formatting Context，行內格式化上下文）是 CSS 中用於佈局的兩種不同的上下文環境。它們決定了元素如何與其兄弟元素、子元素以及父元素進行佈局互動。主要區別如下：
1. 佈局方式:
- BFC: BFC 內部的元素會按照垂直方向排列，每個元素的左外邊緣會觸碰到包含塊的左邊緣（對於從左到右的格式化，從右到左則相反）。垂直方向上的距離由 margin 決定。BFC 的區域不會與浮動元素重疊。
- IFC: IFC 內部的元素會按照水平方向排列，直到一行放不下才會換行。水平方向的距離由 margin、padding、border 和元素內容的寬度決定。IFC 中的換行是由空白符、換行符或其他換行元素（例如
<br>）決定的。
2. 包含塊的計算:
- BFC: BFC 的包含塊通常是其父元素的內容框。
- IFC: IFC 的包含塊由包含它的塊級元素的內容框決定。
3. 對外部元素的影響:
- BFC: BFC 是一個獨立的渲染區域，內部的佈局不會影響到外部的元素，外部的佈局也不會影響到 BFC 內部。
- IFC: IFC 內部的元素會受到外部浮動元素的影響，可能會被浮動元素覆蓋。
4. 對內部元素的影響:
- BFC: BFC 會包含內部的浮動元素，防止 margin collapsing（外邊距合併）。
- IFC: IFC 不會包含內部的浮動元素，可能會發生 margin collapsing。
5. 建立 BFC 的方式:
以下幾種方式可以建立 BFC：
- 根元素
<html> - 浮動元素 (float 的值不為 none)
- 絕對定位元素 (position 的值為 absolute 或 fixed)
- display 的值為 inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
- overflow 的值不為 visible (例如 hidden, auto, scroll)
6. 建立 IFC 的方式:
預設情況下，塊級元素內部的文字和其他行內元素會建立 IFC。
總結:
| 特性 | BFC | IFC |
|---|---|---|
| 佈局方式 | 垂直佈局 | 水平佈局 |
| 包含塊 | 父元素的內容框 | 包含它的塊級元素的內容框 |
| 與浮動元素 | 不重疊 | 可能被覆蓋 |
| 外邊距合併 | 防止內部元素的 margin collapsing | 可能發生 margin collapsing |
| 獨立性 | 獨立渲染區域 | 受外部元素影響 |
理解 BFC 和 IFC 的區別對於前端開發者至關重要，可以幫助我們更好地控制頁面佈局，解決一些常見的佈局問題，例如清除浮動、防止外邊距合併等。