为什么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给出的例子：
[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; }
看小提琴
