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

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

这是结果：

为什么不是为了屏幕上：红色，红色和蓝色之间的文字，Bl绿色？

由于

Answer 1

“A浮动框被定位在正常流中，然后取出来的流动以及移位到左边或右边尽可能。内容可能沿着浮动的一侧流动。 [...]当一个盒子取出正常流动，所有内容仍然正常流程中会完全忽略它，因为它没有腾出空间。”

Source

这是因为你”重新浮动剩下的元素。你基本上是说，相对于其他浮动元素，这些元素将尽可能留在页面上。你的文本不是浮动的，因此是相对于最右边的，左浮动的元素。那有意义吗？

为了达到您想要的效果，只需将文本放在DIV，SPAN等中，然后将它左移即可。

Answer 2

CSS中有两种类型的元素：块级和内联元素。这些元素及其定位受流程中所谓的概念支配。

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

要素，给出position:fixed和被给予了一个float属性元件从通常意义流取出，与另外需要提醒的是内联元素和文本将换浮动元件周围。

如果你可以想象一个浮动元素作为一个箱子从身体上离开地面，飞向左边或者右边，直到它不能再继续下去，然后把自己放回地面，你会得到正确的想法（想象Terran基于星际争霸）。被浮动的元素正好吹到你的文本上，然后你的文本重新定位，以便在浮动的东西“落地”后环绕它。

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

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