Question

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

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

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

＆＃13;

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

＆＃13;

<div class="inline">
    first line<br>
    second line<br>
    third line<br>
</div>

<div class="yellow" >floated div</div>

＆＃13;

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

Answer 1

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

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

这在规范中有记载：

<强> 9.5 Floats

由于浮动不在流程中，因此创建了非定位块框   浮动框之前和之后垂直流动为如果浮动没有   存在。   但是，旁边创建的当前和后续行框   必要时缩短浮子以为边缘盒腾出空间   浮动。

这意味着块级元素（例如<div>，<p>，...） - 未定位 - 忽略浮点数，而行框沿其侧面流动。

W3C给出的一个例子：

^[D]


IMG框浮动到左侧。以下内容是   格式化为浮动的右侧，从与...相同的行开始   浮动。浮子右侧的线盒由于缩短而缩短   浮动的存在，但恢复他们的正常＆＃34;宽度（宽度）   在浮动之后包含由P元素建立的块。

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

解决方案

来自CSS level 2.1 spec：


表的边框，块级替换元素，或   正常流程中的元素，用于建立新的block formatting context（例如，具有＆＃39;溢出＆＃39;除了＆＃39;可见＆＃39;）的元素必须   不与元素本身相同的block formatting context中任何浮点数的边距框重叠。

因此，如果向overflow div添加visible除.yellow以外的值的属性，它会阻止div与浮动元素重叠：

<强> EXAMPLE HERE

.yellow { overflow: hidden; }

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

如果默认情况下受限制，则{Floraated元素下的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填充剩余的宽度。

希望这有帮助。

答案 2 :(得分：0)

<强> CSS：

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

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

see fiddle

Answer 3

<强> CSS：

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

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

see fiddle

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

3 个答案:

解决方案