为什么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>

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

Answer 1

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

当一个元素向左浮动时(在你的情况下为.inlinediv),下面的内容沿着该元素的右侧向下流动,线框缩短但是包含块的宽度由下面的元素建立(在你的情况下)所述.yellow格)被保留.

这在规范中有记录:

9.5浮子

由于浮动不在流中,因此在浮动框之前和之后创建的非定位块框垂直流动,就像浮动不存在一样. 但是,根据需要缩短浮动旁边创建的当前和后续行框,以便为浮动的边距框腾出空间.

这意味着块级元素(如<div>,<p>,...) -即不位于-忽略浮动,而行框沿其侧流动.

W3C给出的一个例子:

IMG框浮动到左侧.后面的内容格式化为float的右侧,从float的同一行开始.由于浮动的存在,浮动右侧的线框缩短,但在浮动之后恢复其"正常"宽度(由P元素建立的包含块的宽度).

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

解决方案

表的边框,块级替换元素或正常流中建立新块格式化上下文的元素(例如"溢出"除"可见"之外的元素)不得与边框重叠.与元素本身相同的块格式化上下文中的任何浮点数.

因此如果添加overflow比其他值属性visible到.yellow的div,它可以防止在div从浮动元件重叠:

.yellow {
    overflow: hidden;
}

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

如果默认情况下受限制,则内容将不会在浮动元素下继续.