CSS overflow:hidden 與 clear:both 的區別與適用場景

核心結論

兩者作用完全不同，常被混淆是因為都能讓父元素「包住」浮動子元素，但機制不同：

現代最佳實踐：Clearfix 偽元素

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

將 .clearfix 加在父容器上，語義清晰、無副作用、兼容性佳。

何時用 overflow:hidden？

• 確定容器不會有內容溢出需顯示的場景（如固定高度的列表項、圖片裁剪容器）。
• 需同時觸發 BFC 解決外邊距塌陷、阻止文字環繞等。

何時用 clear:both？

• 舊專案已大量使用空 <div class="clear"></div>，維護成本低。
• 需要在浮動元素中間強制換行（如兩欄浮動中間插入全寬橫幅）。

Flex/Grid 時代

現代佈局首選 display: flex 或 grid，天然包含浮動、無外邊距塌陷，徹底避開此類問題。