CSS 浮動導致父容器高度塌陷？解決方案與最佳實踐

問題現象：浮動元素導致內容溢出父容器

在使用 float 佈局時，常會遇到一個經典問題：父容器 div 的高度無法被撐開，導致子元素「溢出」容器之外，甚至影響後續佈局。這是因為浮動元素脫離了標準文檔流，父容器若不採取措施，高度會塌陷為 0。

代碼示例分析

以下簡化結構展示了典型的浮動佈局：

<div id="header">
  <div id="header_left"></div>
  <div id="header_center"></div>
  <div id="header_right"></div>
</div>
<div class="clear"></div>

對應 CSS：

#header_left, #header_center, #header_right { float: left; }
.clear { clear: both; }

若移除 .clear，#header 高度將塌陷，背景色、邊框無法正常顯示。

核心解決方案

1. 清除浮動（Clearfix）

在父容器後添加空標籤並設置 clear: both（如上例），或使用偽元素方案（推薦，無需額外 HTML）：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

將 clearfix 類添加到父容器即可。

2. 觸發 BFC（塊級格式化上下文）

給父容器添加以下任一屬性可使其包含浮動子元素：

• overflow: hidden / auto / scroll
• display: flow-root（現代瀏覽器支援）
• float: left / right（但會使父元素也浮動）
• position: absolute / fixed

最常用且副作用最小的是 overflow: hidden 或 display: flow-root。

常見誤區與建議

• 避免濫用浮動：現代佈局優先使用 Flexbox 或 Grid，浮動僅用於文字環繞等場景。
• 代碼縮進規範：保持 HTML 結構清晰縮進，便於排查標籤嵌套錯誤。
• 檢查寬度總和：浮動元素寬度加上 margin/padding/border 超過父容器會導致掉行，看似「溢出」實為換行。

總結

浮動導致父容器高度塌陷是 CSS 經典行為，而非 Bug。掌握 Clearfix 與 BFC 兩大類解決方案，並向現代佈局遷移，能從根本上避免此類問題。