html - float 2 div 背后的 css float 规则是什么？

Question

在我看来，当 float 2 个 div 而不是一个时，我们会得到完全不同的行为。在这个例子中 http://jsfiddle.net/nwZC3/2/左侧边栏 float 在主 div 内。

<div class="left-sidebar" style="float:left; width:10%;"></div>
<div class="main" style="width:70%;"></div>

但是在这个http://jsfiddle.net/m77na/9/这次具有 float:left 样式的主 div 不会在右侧边栏内 float ，不同之处在于我们在布局中还有另一个 float div。

<div class="left-sidebar" style="float:left;width:10%;"></div>
<div class="main" style="width:70%;float:left"></div>
<div class="right-sidebar" style="width:20%;"></div>

我试图在规范(w3c 视觉格式化模型)中找到一条 float 规则来解释这种行为，但我没有找到。

Answer 1

当您仅 float .left-sidebar 时，发生的情况是它仅针对 .main 的内容 float 。 .main 元素本身的位置就好像 .left-sidebar 根本不存在一样——也就是说，.left-sidebar 已被占用在 .main 参与的正常流程之外。

当你 float 两个元素时，发生的事情是 .left-sidebar 相对于 .main 本身 float 。结果是两个盒子并排堆叠在一起。 .main 元素位于 following .left-sidebar 的 float 位置，因为它们都是 float 的。 .main 中的内容不受 .left-sidebar float 的影响。

Section 9.5.1规范的部分对 float 属性及其值进行了非常简洁的描述。具体来说，

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).

它还详细说明了 float 应该如何与其他内容和其他 float 交互。有几条规则，但只有第二条适用于您的示例(它基本上意味着“左浮动框必须相互堆叠，如果不是水平则垂直”):

Here are the precise rules that govern the behavior of floats:

1. ...
2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
3. ...