Float 不調整Div 大小之謎

當使用CSS float 時，假設後續元素將左對齊而不是流到新的元素上線。然而，在某些情況下，例如提供的範例，下面的 div 繼續跨越整個寬度，而不是從第一個 div 的右側開始。

為了理解這種行為，我們深入研究 float 的複雜性定位。當元素浮動時（在本例中為 .inline div），其下方的內容與該元素的右側對齊。然而，由後續元素（.yellow div）建立的包含區塊的寬度仍然保留。

CSS 規範中概述了這種行為：未定位的塊框垂直流動，就好像浮動沒有一樣存在。但是，浮動旁邊的行框會縮短以容納浮動的邊距框。

因此，如果區塊級元素（如 .yellow div）具有背景，它將延伸穿過浮動元素。

解析度

根據CSS level 2.1，具有某些屬性的元素（區塊級替換、建立新的區塊格式化上下文的元素）不得與任何浮動在相同的上下文中。在 .yellow div 中新增「visible」以外的「overflow」屬性可防止其與浮動元素重疊。

重疊何時有用

重要的是請注意，當浮動元素後面的內容足夠長以正常繼續的情況下，重疊可能會很有用。預設限制內容可能會導致內容無法在浮動元素下流動。