為什麼浮動元素似乎不影響 Div 寬度？

CSS 浮動行為：了解Div 寬度保留

將float:left 屬性應用於HTML 元素時，預計以下元素將被推到左邊而不是換行。但是，在某些情況下，div 寬度可能看起來不受影響。

在給定的範例中，第二個 div（class="yellow"）的內容正確對齊，但 div 本身仍然對齊跨越容器的整個寬度。此行為源自於浮動定位的基本性質。

當元素浮動時，它將從文件的正常流程中刪除。然而，浮動元素佔用的空間仍然被佔用該空間的後續元素「保留」。

這種空間保留記錄在 CSS 規範中，該規範規定非定位塊 -水平元素（例如 div）將浮動視為垂直佈局中不存在的浮動。然而，行框（包含文字的矩形區域）會被縮短以容納浮動的邊距框。

因此，後續元素的內容會沿著浮動的一側向下流動，但浮動的寬度會減少。容器（由後面的未浮動元素決定）保持保留。

要解決此問題，一種解決方案是對後續元素套用溢位屬性（例如溢位：隱藏）。透過這樣做，您可以建立一個新的區塊格式化上下文，從而防止元素與浮動元素的邊距框重疊。這會強制後續元素縮小到不與浮動重疊的大小。

以上是為什麼浮動元素似乎不影響 Div 寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！