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

Question

据我理解，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>

编辑：我期望上面的代码看起来像这样，但是不需要显式地使用边距。

- shaft

---

我期望第二个 div 与第一个 div 对齐。实际上，div-content 确实对齐了，但是背景跨越了整个宽度。我不明白为什么会这样。 - shaft

你只是看到了背景透过浮动的 div 显示出来。浮动元素被从文档的正常流中移除，并尽可能地向左（或右）推。 - j08691

我希望它看起来像这里（http://jsfiddle.net/u14dwpqx/1/），但不需要显式地使用边距。 - shaft

你期望的行为更适合使用内联块元素而不是浮动元素来实现。 - j08691

根据您发送的第二个链接，他们指出：浮动框的边距不会与相邻框的边距合并在一起，但实际情况并非如此。我真的是一个 CSS 初学者，已经检查了各种来源，如果我能自己找到解决方案，我就不会在 SO 上发布。任何帮助都将不胜感激。 - shaft

Answer 1

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

当一个元素向左浮动（在您的情况下是 .inline div），其后面的内容会沿着该元素的右侧流动，行框被缩短，但是由接下来的元素（在您的情况下是 .yellow div）建立的 包含块 的宽度是保留的。

这在规范中有所记录：

9.5 浮动

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块级框会垂直地流动，就好像浮动不存在一样。 但是，与浮动相邻的当前和随后创建的行框将根据需要缩短，以腾出浮动的边距框的空间。

这意味着块级元素（如<div>，<p>等）——未定位的元素——会忽略浮动，而行框则沿其侧流动。 W3C给出了一个例子： ^[D] 引用一段话：

图片框向左浮动。随后的内容格式化为浮动元素右侧，与浮动元素在同一行上开始。由于浮动元素的存在，右侧的行框被缩短，但在浮动元素之后恢复其“正常”宽度（由P元素建立的包含块的宽度）。

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

解决方案

来自CSS level 2.1规范:

表格的边框框、块级替换元素或在正常流中建立新的块级格式上下文（例如具有“overflow”属性而不是“visible”的元素）的元素不得与同一块级格式上下文中的浮动元素的边缘框重叠。

因此，如果您将.yellow div添加一个值为visible以外的overflow属性，它将防止div与浮动元素重叠：

这里有个示例

.yellow {
    overflow: hidden;
}

---

重叠在编程中特别有意义，尤其是当以下内容的长度足够大以使其在浮动元素后正常继续。

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

- Hashem Qolami

---

谢谢！非常有用的信息。所以基本上，浮动元素被从流中移除（因此黄色背景跨越，就好像第一个不存在一样），但它通过移动其内容影响后续元素，以便留出空间。 - shaft

Answer 2

你需要将黄色的 div 也设置为浮动，这样它才能正常工作；

.inline {
    float:left;
}

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

然而，仅仅浮动元素并不能将其自动放置在下一个元素的左侧，因此您需要使用display: inline-block;来显示同一行上的下一个div，并使用display: block;来显示在其下方。

如果要显示为内联元素，您还应该为两个div都设置宽度（以百分比表示，如果需要），它们加起来不超过100％或较少，包括任何左右边距和填充。

另一件事是将.inline设置宽度并浮动它，然后将.yellow的左边距设置为与其相同的值，但不要浮动它。

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

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

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

希望这可以帮到你。

- worldofjr

---

但是第三个div也会与第二个对齐，而且不会使用剩余的可用宽度。 - shaft

感谢您的帮助和解释。在您的第二个示例中，您需要事先知道宽度，这可能很棘手，如果我使用display:inline-block，则第二个div不会自动跨到右侧（http://jsfiddle.net/u14dwpqx/4/）。我试图使用浮动技术制作页面的简单布局，也许flex是更好的选择。 - shaft

Answer 3

CSS：

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

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

查看fiddle

- Mahdi Rostami