理解CSS 中「clear:both」的作用

當網頁中有向左或向右浮動的元素時，它可以導致後續元素圍繞它們流動。為了防止這種情況，CSS提供了「clear」屬性，可以將其設定為特定一側（左、右）或「兩者」。

「clear:both」有什麼用?

"clear:both" 指示元素放置在已左右浮動的所有先前元素下方。這允許它以新行開始，清除可能環繞浮動元素的任何邊距或填充。

「clear:both」如何運作？

在正常的文檔流中，元素垂直堆疊，內容圍繞元素流動。但是，當元素浮動時，它會向左或向右移動，從而允許其他內容在其下方流動。 "clear:both" 告訴目前元素從兩側先前浮動的元素下方開始。

用法範例

考慮以下HTML 程式碼：

在此範例中，「左浮動」div向左浮動，導致“這是一個段落”文字環繞它。然後使用“Clear Both”div 清除左側和右側，從而允許“This is a new paragraph”文字出現在其下方的新行中。 
Conclusion 
透過在元素上設定“clear:both”，您可以確保它在任何先前浮動元素下方的新行上開始，從而確保一致且受控的佈局。