CSS 中「clear:both」的目的為何？

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

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

「clear:both」有什麼用?

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

「clear:both」如何運作？

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

用法範例

考慮以下HTML 程式碼：

<div>

在此範例中，「Left float」div 向左浮動，導致「 This is a paragraph」文字換行圍繞它。然後使用“Clear Both”div 清除左側和右側，從而允許“這是一個新段落”文字出現在其下方的新行中。

結論

透過在元素上設定“clear:both”，您可以確保它在任何先前浮動元素下方的新行開始，從而確保一致和受控佈局。

以上是CSS 中「clear:both」的目的為何？的詳細內容。更多資訊請關注PHP中文網其他相關文章！