Question

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

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

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

<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可视化格式化模型）中找到浮动规则来解释这种行为，但我没有找到任何。

Answer 1

当您只浮动.left-sidebar时，会发生的情况是它仅浮动 <{1}}的内容。 .main元素本身的位置就好像.main根本不存在 - 也就是说，.left-sidebar已从.left-sidebar参与的正常流程中取出。

当你浮动两个元素时，会发生.main浮动.left-sidebar本身。结果是两个盒子并排堆叠。 .main元素位于之后 .main的浮点数，因为它们都是浮动的。 .left-sidebar中的内容不受.main浮点数的影响。

规范的
Section 9.5.1对.left-sidebar属性及其值的描述非常简洁。具体地，


<强>左
  该元素生成一个浮动到左侧的块框。内容从盒子的右侧开始流动，从顶部开始（以'clear'属性为准）。

它还详细说明了浮点数应该如何与其他内容和其他浮点数进行交互。有几个规则，但只有第二个规则适用于你的例子（它基本上意味着“左浮动框必须相互堆叠，如果不是水平然后垂直”）：


以下是管理浮动行为的准确规则：


...

如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动框，则对于每个此类较早的框，要么当前框的左外边缘必须在右侧早期框的右外边缘，或其顶部必须低于前一个框的底部。类似的规则适用于右浮箱。

...

浮动2个div后面的css浮动规则是什么？

1 个答案: