CSS浮动：为什么浮动应用于要浮动的元素之前的元素？

CSS的“float”属性总是让我感到困惑。为什么将“float”属性应用于要浮动的元素之前的元素

为了帮助可视化我的问题，我创建了以下JSFIDLE

在本例中，float属性应用于导航

，而不是内容

。我本以为需要将浮动应用于

---

“content”

元素，因为这些是您希望“浮动”到页面正常流程之外的项目。我显然错过了什么。有人能解释得比我理解的更好吗？谢谢。

当使用

float:{position}

CSS时，您告诉该元素“在其父元素的{position}侧浮动”。内容导航的行为正常，就好像导航

div

根本不存在一样，因为这是您指示浮动到其他元素之外的导航。

这是您想要的吗

---

浮动位置相对于“容器”即“父对象”（在本例中，没有容器时，后者是整个身体）

听起来您在寻找一个很好的解释，解释为什么浮动会以这种方式工作？以下是一些不错的评论：

• 来自CSS技巧
• 从粉碎编码
• 从堆栈溢出

我自己的解释：浮动的元素实际上就是浮动的元素。它旁边的元素正在进行所谓的“包装”。

“float:left；”

表示div正在顶着父级的“左墙”。。当下一个

“float:left；”

div添加到同一个容器中时，它将被推到左侧，并碰到第一个div的“右墙”。。。。就像一个谜

容器的宽度决定了第二个

“float:left；”

div是否有足够的空间放置在第一个容器旁边，或者它是否在下面

如果每个div都有33%的宽度，并且没有边距，并且它们最终位于一条漂亮的直线上，那么在容器中通常可以有3个div浮动在左边。但如果宽度为34%，则会有一个在下面

---

这是对浮动div最简单的解释。。当然，当它浮动正确时，情况正好相反。

此外，根据内容的布局，您可以使用类似的内容。它使用float：对，这不是因为我不知道如何完成布局，而是我试图理解为什么它是这样工作的。谢谢你的例子！因此，导航DIV将尊重“header”DIV，并且只在“header”DIV允许的范围内，在其自己的容器DIV中向上浮动？我一直不明白为什么“content”DIV在没有应用任何

float

属性的情况下，会浮动到“navigation”DIV的左侧。但是，如果我理解正确的话，它们将对齐到“导航”DIV的右侧，因为它挡住了去路，它们希望位于“标题”DIV的下方，这是正常的流程。这有意义吗？这就是问题所在-内容div不是浮动的-导航div在其他元素之前浮动。将元素视为长方体中的对象堆栈。当您使一个“浮动”（通过将其从堆栈中拉出并朝向您）时，其他的下拉以填充其位置（在本例中，下拉是因为HTML是自顶向下的）。其他那些盒子不是漂浮的，它们只是填满了空间——是你拉出的那个盒子漂浮着。