为什么CSS浮动不改变以下div的宽度?

正如我所理解的float:left ,它会将后面的元素向左推,而不是在新行上。

在下面的示例中,我期望第二个div从第一个div的右边开始,但是在下面的jsfiddle中可以看到,它仍然跨越整个宽度。

另一方面,内容神奇地开始在它应该的地方。 float规则只浮动的内容,而不是边距?

这里的例子

 .inline { float:left; } .yellow { background-color:yellow; } 
 <div class="inline"> first line<br> second line<br> third line<br> </div> <div class="yellow" >floated div</div> 

编辑:我期望上面的代码看起来像这样,但没有明确的需要使用边距。

这是浮动定位的预期行为。

当一个元素浮动到左边(在你的情况下.inline div)时,下面的内容向下stream到该元素的右边, .inline被缩短,但由下面元素build立的包含块的宽度(in你的情况.yellow div)被保留

这在规范中有记载:

9.5漂浮

由于浮动不在stream程中,所以在浮动框之前和之后创build的未定位块框垂直stream动,就好像浮动不存在一样。 然而,根据需要缩短在浮动物旁边创build的当前和随后的线框,以便为浮动物的边距框腾出空间。

这意味着块级元素(例如<div><p> ,…) – 没有定位 – 忽略浮动,而线框stream动。

W3C给出的例子:

CSS浮动重叠 [d]

IMG框浮在左边。 随后的内容被格式化到浮点数右侧,从浮点数开始。 漂浮物右边的线框由于漂浮物的存在而缩短,但在漂浮之后恢复它们的“正常”宽度(由P要素build立的包含区域的宽度)。

因此,如果您给.yellow元素一个背景,您将看到它横跨容器并继续通过浮动元素。

解决scheme

从CSS级别2.1规格 :

表格,块级别replace元素或正常stream程中用于build立新块格式上下文的元素(例如“可见”以外的“溢出”元素)的边框不得与与元素本身在同一个块格式上下文中浮动。

因此,如果你添加overflow属性的值不是visible.yellow div,它可以防止div重叠浮动元素:

在这里的例子

 .yellow { overflow: hidden; } 

在下列内容的长度足以在浮动元素之后正常继续的情况下,重叠是特别有意义的。

如果默认情况下它被限制, 内容将不会继续在浮动元素下。

你也需要漂浮黄色的div ,然后才能工作。

 .inline { float:left; } .yellow { background-color:yellow; float: left; } 

但是,只是浮动元素不会自动将其放在下一个元素的左侧,所以需要display: inline-block; 在同一行display: block;下一个div并display: block; 显示在下面。

你也应该给一个宽度(百分比,如果你想要的话)两个div加起来不超过100%, 包括任何左右边距和填充,如果内联显示。

你可以做的另一件事是为.inline设置一个宽度,然后浮动它,然后给。 .yellow的左边距相同的值,而不是浮动它。

 .inline { float:left; width:50px; } .yellow { background-color:yellow; margin-left:50px; } 

这将允许.yellow div填充剩余的宽度。

希望这可以帮助。

CSS:

 .inline { float:left; position:relative; width:auto } .yellow { background-color:yellow; position:relative; float:left; } 

看小提琴