CSS Float 佈局中如何讓元素正確換行——清除浮動完全指南

問題場景

頁面包含多個 float: left 的 <div>，最後一個按鈕區域需顯示在最下方，但因浮動導致其緊跟在上方表格右側。

根本原因

浮動元素脫離標準流，父容器高度塌陷為 0，導致後續元素無法正常換行。

解決方案：清除浮動

方法一：在目標元素添加 clear: both（最直接）

<div class="bingrenguanhli" style="text-align:center; clear:both">
    <button class="cx">核收</button>
    <button class="cx">退出</button>
</div>

方法二：父容器使用 Clearfix Hack（推薦用於容器）

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
/* HTML */
<div class="container clearfix">
    <div class="float-left">...</div>
    <div class="float-left">...</div>
</div>

方法三：父容器設置 overflow: hidden/auto（副作用：可能剪裁內容）

最佳實踐建議

• 優先使用 clear: both 於需換行的元素，語義清晰、無副作用。
• 現代佈局建議改用 Flexbox 或 Grid，徹底避免浮動帶來的維護困擾。

Flexbox 重寫示例

<div style="display:flex; flex-direction:column; width:1100px;">
    <div class="search-bar">...</div>
    <div style="display:flex;">
        <div class="table-area" style="flex:1;">...</div>
        <div class="side-area" style="width:300px;">...</div>
    </div>
    <div class="footer-buttons" style="text-align:center;">...</div>
</div>

總結

浮動佈局時代的遺產問題，用 clear: both 快速修復；新專案請拥抱 Flexbox/Grid，從根源消除浮動麻煩。