在CSS 中,float: left 屬性應該是將後續元素向左移動一條新線。然而,在給定範例的場景中,第二個 div 繼續跨越整個寬度,這違背了預期。另一方面,內容正確對齊。
此行為是浮動定位所固有的。當元素浮動時(本例為 .inline div),內容會圍繞其右側流動。行框被縮短以容納浮動的邊距框,但包含區塊的寬度(由 .yellow div 建立)仍然保留。這是在 CSS 規範中指定的。
為了防止 .yellow div 與浮動元素重疊,可以增加一個值為visible以外的值的overflow屬性。這會強制瀏覽器建立新的區塊格式化上下文,從而防止重疊。
以上是為什麼 `float: left` 不改變 Div 的寬度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!