2

我写了非常简单的 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上的演示

4

1 回答 1

2

默认情况下，adiv是block一个宽度为 100% 的层级元素。

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

通过浮动第一个元素，您将其从文档的正常流程中取出，因此它不再完全充当block级别元素。因此，如果您没有在第二个上设置宽度，它实际上与第一个重叠。

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

即使您确实在两者上都设置了宽度divs（假设它们没有浮动），它们仍然是block水平元素，出现在不同的行上。jsFiddle在这里

于 2013-10-20T17:07:25.337 回答