CSS Clearfix 浮動清除技術演進史：從舊版 Hack 到現代最佳實踐

前言

早期 CSS 佈局常用 float 浮動，父容器無法自動撐開高度（高度塌陷）。為解決此問題，演進出多種 Clearfix 技術。本文梳理從「空標籤法」到現代 display: flow-root 的完整演進。

第一代：空標籤清除（暴力但有效）

.clear { clear: both; line-height: 0; }

在浮動元素後插入 <div class="clear"></div>。缺點：語義化差、增加無意義 DOM 節點、大型頁面產生大量空標籤。

第二代：經典 Clearfix（:after 偽元素）

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix { display: inline-table; }  /* IE/Mac */
* html .clearfix { height: 1%; }      /* IE6 trigger hasLayout */
*+html .clearfix { height: 1%; }      /* IE7 trigger hasLayout */
.clearfix { display: block; }         /* 結束 IE/Mac hack */

• 利用 :after 插入隱形塊級元素清除浮動。
• IE6/7 不支援 :after，需 zoom:1 或 height:1% 觸發 hasLayout。
• 針對 IE/Mac 的 Hack 已無實際意義。

第三代：精簡版（Nicolas Gallagher 推廣）

.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }  /* IE6/7 */

• display: table 建立匿名 table-cell，形成 BFC（塊級格式化上下文），自然包含浮動。
• :before 解決 margin collapsing（外邊距塌陷）問題。
• 極度精簡，兼容 IE6+、所有現代瀏覽器。

第四代：零寬度空格優化版

.clearfix:after {
    content: "\200B";  /* Unicode Zero Width Space */
    display: block;
    height: 0;
    clear: both;
}
.clearfix { *zoom: 1; }

• 用 \200B 替代 content: "."，避免某些情況下顯示小圓點。
• 移除 visibility: hidden，代碼更短。

第五代：現代瀏覽器原生方案（推薦）

方案 A：display: flow-root（最語義化）

.container { display: flow-root; }

• CSS Display Module Level 3 標準屬性，專門用於建立 BFC 包含浮動。
• 支援：Chrome 58+、Firefox 53+、Edge 79+、Safari 15.4+。IE 全系列不支援。

方案 B：overflow: hidden / auto（副作用最小）

.container { overflow: hidden; }  /* 或 auto */

• 觸發 BFC，自動包含浮動子元素。
• 缺點：若子元素有 box-shadow、transform、下拉選單等超出容器內容會被裁切或出現滾動條。

方案 C：Flex / Grid 佈局（根治浮動）

.container { display: flex; }  /* 或 grid */

• 現代佈局模式天然不依賴 float，無需清除浮動。
• 新專案首選，舊專案重構成本較高。

選型建議決策樹

1. 新專案、無需支援 IE → display: flow-root 或 Flex/Grid。
2. 需支援 IE11 → 精簡版 Clearfix（第三代） 最穩健。
3. 需支援 IE6/7 → 第三代 + *zoom:1。
4. 舊專案快速修補、無複雜陰影/下拉 → overflow: hidden。

總結

Clearfix 經歷了「空標籤 → 偽元素 Hack → BFC 科學化 → 原生屬性」四個階段。理解 BFC 原理（display: table、overflow、flow-root、flex 均可建立 BFC）才能根據專案環境做最優選擇。現代開發建議優先使用 Flex/Grid 避免浮動，次選 flow-root，最後才是 Clearfix Hack。