理解「clear：both」在CSS 風格中的作用

在進行網頁設計時，理解浮動的概念至關重要元素以及如何控制它們的位置。在這種情況下，「clear：both」樣式屬性成為一個有價值的工具。

「clear：both」的解釋

「clear：both」屬性使一個元素，佔據其前面的任何浮動元素下方的空間。它強制元素在新行上開始，確保它不會重疊或乾擾浮動元素。

工作原理

浮動元素會移動它脫離文件的正常流程，允許其他元素環繞它。透過應用“clear：both”，您可以指示當前元素忽略任何前面的浮點數的存在，並表現得好像它們不存在一樣。以下程式碼範例示範了此行為：

在本例中，帶有「clear: Both」的div 將另起一行，確保它不會出現與其上方的任何浮動元素內聯或下方。 
變體與範例
您可以進一步指定希望元素清除的方向使用「清除：左」或「清除：右」。這些選項可讓您清除已設定為左側或右側的浮動。 
例如，如果您的佈局有兩個側邊欄且中間有一個主要內容區域，則可以使用“clear: Both”在主要內容div 上，以確保它佔據兩個側邊欄下方的空間，無論它們的浮動方向如何。