为什么这个CSS将蓝色框放在右角而不是绿色框之后？

Question

我有这个HTML和CSS：

<div style="background-color:Red; width:200px; height:200px;">

<div style="background-color:Blue; width:50px; height:50px; float:right;">aa</div>

<div style="background-color:Green; width:50px; height:50px;">aa</div>

我以为它会把蓝色的盒子放在绿色的盒子之后（流动布局），但它会把它移到红色容器的边缘，这真的很奇怪。任何想法为什么它不会流动？

Answer 1

'float'表示'移动到那一侧并允许任何后续出现在另一侧'

由于您向右浮动蓝色，它出现在其容器的最右侧。

由于蓝色和蓝色旁边有空间浮动，绿色出现在蓝色旁边。绿色出现在左侧，因为它没有任何东西可以改变其默认的水平位置（例如边距或触摸绿色）。

Answer 2

因为那是float: right所做的。

根据specification：

  

浮动框向左移动   或直到其外缘接触   包含块边缘或外部   另一个浮动的边缘。

Answer 3

因为float尽可能将元素移动到右侧和到顶部。

以下是管理浮动行为（from W3）的准确规则：

1. 左浮动框的左外边缘可能不在其包含块的左边缘的左侧。类似的规则适用于右浮动元素。
2. 如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动框，则对于每个此类较早的框，要么当前框的左外边缘必须在右侧早期框的右外边缘，或其顶部必须低于前一个框的底部。类似的规则适用于右浮箱。
3. 左浮动框的右外边缘可能不在其旁边的任何右浮动框的左外边缘的右侧。类似的规则适用于右浮动元素。
4. 浮动框的外顶部可能不高于其包含块的顶部。当浮动发生在两个折叠边距之间时，浮动的位置就好像它有一个空的匿名块父级参与流程。这种父母的位置由保证金折叠部分中的规则定义。
5. 浮动框的外部顶部不得高于源文档中较早元素生成的任何块或浮动框的外部顶部。
6. 元素浮动框的外部顶部可能不会高于包含由源文档中较早元素生成的框的任何行框的顶部。
7. 左侧浮动框左侧的另一个左浮动框可能没有右边的外边缘到其包含块的右边缘。 （松散地：左边的浮子可能不会在右边缘伸出，除非它已经尽可能地向左边。）类似的规则适用于右浮动元素。
8. 浮动框必须尽可能高。
9. 左浮箱必须尽可能地放在左边，右边浮动的箱子尽量放在右边。 优先于较高的位置，而不是左/右的位置。

正如您所看到的，漂浮的盒子往往会出现在顶部。如果你要漂浮其他盒子，那么订单就很重要了。如果只有一个漂浮，它会推动所有其他的。

Answer 4

Float将项目移动到父元素的最左侧或右侧。

为什么不将它放在绿色div之后，并将float：left应用于两者？