CSS 清除浮動的 6 種經典方法完整指南

前言：為什麼需要清除浮動？

在 CSS 佈局中，float 是實現多欄式排版的常用屬性。但浮動元素會脫離標準文檔流，導致父容器高度塌陷（高度為 0），影響後續佈局。掌握清除浮動的技巧是前端開發的基本功。本文整理 6 種主流清除浮動方案，附帶代碼示例與優缺點分析。

浮動基礎行為回顧

• 讓塊級元素在同一行顯示
• 行內元素獲得寬高設置能力
• 未設寬高時，寬度由內容撐開
• 換行符不會被解析為空白間隙（避免 inline-block 的間隙問題）
• 元素脫離文檔流，向指定方向移動直到碰到父邊界或另一浮動元素

方法一：父級也加浮動

.box {
  width: 300px;
  margin: 0 auto;
  border: 10px solid #000;
  float: left; /* 父級浮動 */
}
.div {
  width: 200px;
  height: 200px;
  background: red;
  float: left;
}

缺點：父級浮動後 margin: 0 auto 失效，無法水平居中。

方法二：父級設置 display:inline-block

.box {
  width: 300px;
  margin: 0 auto;
  border: 10px solid #000;
  display: inline-block;
}

缺點：同樣導致 margin: 0 auto 失效（僅 IE6/7 仍能居中）。

方法三：在浮動元素後添加空標籤 clear:both

.clear {
  height: 0;
  font-size: 0;
  clear: both;
}

<div class="box">
  <div class="div"></div>
  <div class="clear"></div> <!-- 清除浮動 -->
</div>

注意：IE6 下塊級元素最小高度 19px，需加 font-size:0 或 overflow:hidden 解決。

方法四：使用 <br clear="all" />

<div class="box">
  <div class="div"></div>
  <br clear="all" />
</div>

語義化較差，不推薦現代項目使用。

方法五：偽元素 :after 清浮動（推薦）

.clear {
  zoom: 1; /* 觸發 IE6/7 hasLayout */
}
.clear:after {
  content: "";
  display: block;
  clear: both;
}

<div class="box clear">
  <div class="div"></div>
</div>

優點：無額外標籤，語義化好，兼容性強。
補充：IE6/7 下父級若有寬度，自動觸發 hasLayout，無需額外清浮動。

方法六：父級設置 overflow:auto/hidden

.box {
  width: 300px;
  border: 1px solid #000;
  overflow: auto; /* 或 hidden */
}

優點：代碼極少。
缺點：若內容需溢出顯示（如下拉菜單、陰影），會被裁剪或出現滾動條。

總結建議

實際開發中，推薦使用 方法五（偽元素） 作為通用清浮動方案，配合 zoom:1 兼容舊版 IE；若確定容器無溢出需求，overflow:hidden 也是極佳選擇。