Float 不调整 Div 大小之谜

当使用 CSS float 时，假设后续元素将左对齐而不是流到新的元素上线。然而，在某些情况下，例如提供的示例，下面的 div 继续跨越整个宽度，而不是从第一个 div 的右侧开始。

为了理解这种行为，我们深入研究 float 的复杂性定位。当元素浮动时（在本例中为 .inline div），其下方的内容与该元素的右侧对齐。然而，由后续元素（.yellow div）建立的包含块的宽度仍然保留。

CSS 规范中概述了这种行为：未定位的块框垂直流动，就好像浮动没有一样存在。但是，浮动旁边的行框会缩短以容纳浮动的边距框。

因此，如果块级元素（如 .yellow div）具有背景，它将延伸穿过浮动元素。

分辨率

根据 CSS level 2.1，具有某些属性的元素（块级替换、建立新的块格式化上下文的元素）不得与任何浮动在相同的上下文中。向 .yellow div 添加“visible”以外的“overflow”属性可防止其与浮动元素重叠。

重叠何时有用

重要的是请注意，当浮动元素后面的内容足够长以正常继续的情况下，重叠可能会很有用。默认情况下限制内容可能会导致内容无法在浮动元素下流动。