为什么 CSS 浮动不改变下面 div 的宽度？

Question

据我了解float:left，它会将后续元素推到其左侧而不是新行。

在以下示例中，我希望第二个 div 从第一个 div 的右侧开始，但正如您在下面的 jsfiddle 中看到的那样，它仍然跨越整个宽度。

另一方面，内容神奇地从它应该开始的地方开始。 float 规则是否只浮动内容而不浮动边距？

Example here

.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>

编辑：我希望上面的代码看起来像 like this 但没有明确需要使用边距。

Answer 1

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

当一个元素向左浮动时（在您的情况下为.inline div），以下内容从该元素的右侧向下流动，行框缩短但containing block 的宽度由以下元素（在您的情况下为.yellow div）是保留。

这在规范中有记录：

9.5 Floats

由于浮动不在流中，因此创建了非定位块框 前后浮动框垂直流动为如果浮动没有 存在。 但是，在旁边创建的当前和后续行框 浮动会根据需要缩短以为边距框腾出空间 浮动。

这意味着块级元素（例如<div>、<p>、...）——没有定位——忽略浮动，而行框沿着它的一侧流动。

W3C给出的例子：

^[D]

IMG 框向左浮动。接下来的内容是 格式化到浮点数的右侧，从与 漂浮。浮动右侧的行框由于以下原因而缩短了 浮动的存在，但恢复它们的“正常”宽度（ 包含由P元素建立的块）在浮动之后。

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

解决方案

来自CSS level 2.1 spec：

表格的边框、块级替换元素、或 正常流程中建立新block formatting context 的元素（例如具有“溢出”而不是“可见”的元素）必须 不要与元素本身在同一block formatting context 中的任何浮动的边距框重叠。

因此，如果您在.yellow div 中添加值不是visible 的overflow 属性，它可以防止该div 与浮动元素重叠：

EXAMPLE HERE

.yellow {
    overflow: hidden;
}

---

重叠在length of the following content is large enough 在浮动元素之后正常继续的情况下特别有意义。

如果默认限制在浮动元素下the content wouldn't be continued。

Answer 2

你需要把黄色的div也浮起来，然后它才会起作用；

.inline {
    float:left;
}

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

但是，浮动元素不会自动将其放在下一个元素的左侧，因此您需要display: inline-block; 在同一行显示下一个 div，并在下方显示display: block;。

您还应该为两个加起来不超过 100% 的 div 提供一个宽度（如果需要，以百分比表示）包括任何左右边距和内边距（如果内联显示）。

您可以做的另一件事是为.inline 设置一个宽度并使其浮动，然后为.yellow 提供与其左边距相同的值并且不要浮动它。

.inline {
    float:left;
    width:50px;
}

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

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

希望这会有所帮助。

Answer 3

CSS：

.inline {
    float:left;
    position:relative;
    width:auto
}

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

see fiddle