css - 当 block 元素的宽度以 % 或 px 定义时，为什么布局会发生变化

Question

我编写了非常简单的 HTML；

<div style="float:left;width:100px;background-color:red">RED</div>
<div style="background-color:blue">BLUE</div>

如果我不设置第二个 DIV 的宽度或将其设置为 %，则两个 DIV 都在单行中。然而，如果我以 px 为单位给出宽度，它会出现在第二行。

我找不到任何详细说明此行为的引用资料。我用 chrome 和 firefox 都检查过了。

演示 JSFiddle

Answer 1

默认情况下，div 是宽度为 100% 的 block 级元素。

jsFiddle here - 在不设置宽度或 float 它们的情况下查看，它们出现在新行上，占 100%。

通过 float 第一个元素，您将它从文档的正常流中移除，因此它不再完全充当 block 级元素。因此，如果您不为第二个设置宽度，它实际上会与第一个重叠。

jsFiddle here - 第一个 div 有一个透明的背景来证明这一点。

即使您在两个 divs 上都设置了宽度(假设它们不是 float 的)，它们仍然是 block 级别的元素，出现在不同的行上。 jsFiddle here