为什么浮动元素出现在非浮动元素之前，即使它们在标记之后出现？

Question

如果文本在标记中跟随该元素，我认为文本将围绕浮动元素流动。那么为什么以下示例会生成显示的结果？

这是HTML：

<div class="float block red">Red</div>
TEXT BETWEEN RED AND BLUE
<div class="float block blue">Blue</div>
<div class="float block green">Green</div>

CSS：

.float{
    float: left;
}
.block{
    width: 50px;
    height: 50px;
}
.red{ background-color: red;  }
.blue{ background-color: blue; }
.green{ background-color: green; }

这就是结果：

为什么屏幕上没有订单：红色，蓝色，蓝色，绿色之间的文字？

由于

Answer 1

  

“浮动箱位于正常流量内，然后从流量中取出并尽可能向左或向右移动。内容可能沿着浮子的一侧流动。 [...]当一个盒子从正常流程中取出时，仍然在正常流程内的所有内容将完全忽略它并且不为它腾出空间。“

Source

这是因为你正在浮动元素。你实际上是在说这些元素相对于其他浮动元素，它们可以尽可能地保留在页面上。您的文本没有浮动，因此相对于最右侧的左浮动元素。这有意义吗？

要获得所需的结果，只需将文本放在DIV，SPAN等中，然后将其向左浮动。

Answer 2

CSS中有两种类型的元素：块级别和内联元素。这些元素及其定位受一种称为流动的概念的支配。

块级元素在它们之前和之后都有断点，而内联元素则没有。虽然这非常简化，但这些是管理CSS流程的基本规则。

给定position:fixed的元素和给定float属性的元素将从正常意义上的流中删除，另外需要注意内联元素和文本将环绕浮动元素。

如果你能想象一个漂浮的元素作为一个物理地从地面升起的盒子，飞向左边或右边直到它不再进一步，然后将自己倒在地上，你已经得到了正确的想法（想想人族在星际争霸中的基础）。浮动的元素会在你的文本中向右吹，然后你的文本重新定位，以便在浮动的东西“落地”后环绕它们。

浮动总是相对于其他花车定位自己。

这是一个例外，当一个元素卡住clear时。 CSS clear属性基本上表示任何块级元素都将允许浮点数位于一侧或另一侧，否则将浮动元素踢到下一行。它实际上比这复杂一点，你应该看看MDN article on Clear。