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

在我看来，当浮动2个div而不是1个div时，我们会得到完全不同的行为。 在本例中，左侧边栏在主div内浮动

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

---

我试图在规范（w3c可视化格式模型）中找到一个浮动规则来解释这种行为，但没有找到任何规则。

当您只浮动

。左侧边栏

，发生的情况是它只浮动在

.main

的内容上。

.main

元素本身的位置就好像

.left sidebar

根本不存在一样-也就是说，

.left sidebar

已从

.main

参与的正常流中删除

当您浮动这两个元素时，所发生的情况是

.left sidebar

相对于

.main

本身浮动。结果是两个盒子并排堆叠在一起。

.main

元素位于

.left sidebar

的浮动之后，因为它们都是浮动的。

.main

中的内容不受

.left侧边栏

浮动的影响

规范的第三部分对

float

属性及其值进行了非常简洁的描述。具体来说,

左
元素生成一个浮动到左侧的块框。内容在框的右侧流动，从顶部开始（以“clear”属性为准）

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

以下是控制浮动行为的精确规则：

如果当前框是左浮动的，并且源文档中之前的元素生成了任何左浮动框，则对于每个这样的早期框，当前框的左外缘必须位于早期框的右外缘的右侧，或者其顶部必须低于早期框的底部。类似的规则适用于右浮动框

---

学习如何工作同样，我看你的两个例子没有区别。我已经用第二个例子的正确链接更正了这篇文章。现在他们不一样了。我明白你在说什么，但也许我不清楚什么是奇怪的。事实上，在第二个示例中，右侧边栏的内容没有沿着main div的右边框流动。但是，当我在右侧边栏上放置的宽度大于left和main之和时，我错误地发现了原因，并注意到它的内容确实在main旁边流动。所以我错过的是右侧边栏，没有浮动，它的左边缘与左侧边栏的左边缘对齐，所以当宽度小于main+left的宽度时，它不会流到main旁边。

<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>