CSS Float 解決方案筆記

1. 使用 clearfix（推薦做法）

解決浮動元素脫離父元素問題，適用於多數情況。

CSS

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

HTML

<div class="parent clearfix">
    <div class="child float-left">Item 1</div>
    <div class="child float-right">Item 2</div>
</div>

Left

Right

✅ 優點

語義清晰，專門為清除浮動設計。
兼容性好，在大多數瀏覽器中都能正確運作。
不會隱藏超出內容（相比 overflow: hidden 更靈活）。

❌ 缺點

需要額外的 CSS 類別，稍微增加了 HTML 的複雜度。

2. 使用 overflow 屬性

快速解決浮動，但注意內容溢出情況。

CSS

.parent {
    overflow: hidden;
}

Left

Right

✅ 優點

簡單易懂，一行程式碼即可。
不需要額外的 clearfix 類別。

❌ 缺點

內容溢出會被裁剪，不適合需要顯示超出內容的情況。
如果有陰影或下拉選單，可能會被截斷。
對於某些情況下的滾動或絕對定位元素，可能導致意料之外的結果。

3. 使用 display: flow-root（現代做法）

簡潔且現代的方式，適合新專案。

CSS

.parent {
    display: flow-root;
}

Left

Right

✅ 優點

現代且簡潔，不需要額外結構。
不會裁切內容，兼具 clearfix 和 overflow 的優點。
更語義化，且不會影響內部元素的定位。

❌ 缺點

需要考慮舊版瀏覽器兼容性，像 IE 不支援。
舊專案中可能不適合直接使用。

4. 給父元素設定固定 height

適用於內容高度已知且固定的情況。

CSS

.parent {
    height: 100px;
}

Left

Right

✅ 優點

簡單直接，避免了高度塌陷。

❌ 缺點

不靈活，如果子元素高度改變，父元素不會自動調整。
不適合動態內容。

5. 手動插入清除浮動元素

不推薦，但適合快速解決問題。

HTML

<div class="parent">
    <div class="child float-left">Item 1</div>
    <div class="child float-right">Item 2</div>
    <div style="clear: both;"></div>
</div>

Left

Right

✅ 優點

立即有效，不需要寫額外 CSS。

❌ 缺點

HTML結構不乾淨，多了多餘的元素。
破壞語義結構，不推薦。

6. 改用 Flexbox（現代解法）

適合彈性布局，簡潔易用。

CSS

.flex-container {
    display: flex;
    justify-content: space-between;
}

Item 1

Item 2

✅ 優點

簡潔且功能強大，更容易實現現代布局。
自動處理對齊、間距、高度撐開。

❌ 缺點

舊版瀏覽器支援不佳，特別是 IE。

7. 改用 CSS Grid（現代解法）

適用於更複雜且結構明確的布局。

CSS

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

Item 1

Item 2

✅ 優點

非常適合複雜的布局。
提供強大的網格系統，便於控制元素對齊和排列。

❌ 缺點

舊版瀏覽器支援不佳，特別是 IE。