CSS 佈局 - clear 和 clearfix

clear 屬性

當我們使用 float 屬性，並且我們希望下一個元素位於下方（而不是右側或左側）時，我們必須使用 clear 屬性。

clear 屬性指定浮動元素旁邊的元素應該如何處理。

clear 屬性可以有以下值之一

• none - 元素不會被推到左側或右側浮動元素的下方。這是預設值。
• left - 元素被推到左側浮動元素的下方。
• right - 元素被推到右側浮動元素的下方。
• both - 元素被推到左側和右側浮動元素的下方。
• inherit - 元素繼承其父元素的 clear 值。

在清除浮動時，您應該使 clear 與 float 匹配：如果一個元素向左浮動，那麼您應該向左清除。您的浮動元素將繼續浮動，但清除的元素將出現在其下方。

清除浮動技巧

如果浮動元素高於其包含元素，它將“溢位”其容器。我們可以新增一個 clearfix hack 來解決這個問題。

沒有清除浮動

有清除浮動

overflow: auto clearfix 在您能夠控制邊距和填充（否則您可能會看到捲軸）的情況下工作良好。然而，**新的、現代的 clearfix hack** 更安全，以下程式碼用於大多數網頁。