在網頁設計中，float和clear用於控制元素的排列與對齊。雖然現在多用Flexbox和Grid，但在維護舊專案時，仍然需理解它們的運作方式。
float 浮動屬性
float屬性最初是為了讓文字環繞圖片而設計的，但隨著時間的推移，它被廣泛應用於佈局設計中。當一個元素被設定為浮動時，它會脫離正常的文檔流，向左或向右移動，直到碰到包含它的元素邊界或其他浮動元素。
float屬性有以下幾個值：none：元素不浮動，這是預設值。left：元素向左浮動。right：元素向右浮動。
舉例來說，假設我們有一段文字和一張圖片，希望圖片位於文字的左側，並且文字環繞在圖片周圍，可以這樣設定：
<img src="image.jpg" style="float: left; margin-right: 10px;">
<p>這是一段示範文字，將環繞在圖片的右側。...</p>
clear 清除浮動
當使用float屬性時，後續的元素可能會環繞在浮動元素的周圍，這可能會導致佈局問題。為了解決這個問題，就需要使用clear屬性。clear屬性用於控制元素的哪一側不允許有浮動元素，從而避免元素環繞的情況。
clear屬性有以下幾個值：
none：元素的兩側都允許有浮動元素，這是預設值。left：元素的左側不允許有浮動元素。right：元素的右側不允許有浮動元素。both：元素的左右兩側都不允許有浮動元素。
在使用浮動佈局時，包含浮動元素的父容器可能會出現高度塌陷的問題。這是因為浮動元素脫離了正常的文檔流，導致父容器無法自動擴展以包含它們。為了解決這個問題，我們需要清除浮動。
以下是幾種常見的清除浮動的方法：
使用空的清除元素
在浮動元素之後添加一個空的元素，並設定clear屬性，這種方法雖然有效，但會在文檔中添加多餘的元素，可能不符合語意化的要求。
<div style="float: left; width: 100px;">浮動元素 1</div>
<div style="float: left; width: 100px;">浮動元素 2</div>
<div style="clear: both;"></div>
使用偽元素清除浮動
在父容器上使用 CSS 的偽元素來清除浮動，然後，在父容器上應用這個樣式。這種方法不需要在文檔中添加額外的元素，符合語意化的要求。
.container {
background-color: lightgray;
border: 2px solid black;
}
.box {
float: left;
width: 150px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
<div class="container clearfix">
<div class="box">浮動元素</div>
</div>
結語
雖然float和clear現在較少用於佈局，但在維護舊專案時仍然會遇到。理解它們的運作方式，能夠更有效地解決佈局浮動問題，確保版面顯示正確。