为什么这个CSS把蓝色框放在右角，而不是放在绿色框后面？
为什么这个CSS把蓝色框放在右角，而不是放在绿色框后面？
提问于 2011-06-30 23:50:32
我有这个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>我以为它会把蓝色的盒子放在绿色的盒子后面(流布局)，但它把它移到了红色容器的边缘，这真的是wierd..Any的想法，为什么它不流动？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-06-30 23:53:41
“浮动”的意思是“移到那一边，让后面的任何东西都出现在另一边”
由于您是蓝色向右浮动，它会出现在其容器的最右侧。
由于蓝色旁边有空间，并且蓝色是浮动的，因此绿色出现在蓝色旁边。绿色出现在左侧，因为它没有任何东西可以改变其默认的水平位置(例如边距或接触绿色)。
Stack Overflow用户
发布于 2011-06-30 23:55:16
因为这就是float: right所做的。
根据specification的说法
浮动框向左或向右移动，直到其外边缘接触到包含块的边缘或另一个浮动的外边缘。
Stack Overflow用户
发布于 2011-06-30 23:58:34
因为float会将元素尽可能地向右和向上移动。
下面是控制浮点数行为的精确规则(from W3)：
- 左浮动框的左外边缘不能在其包含块的左边缘的左侧。类似的规则也适用于右浮动元素。
- 如果当前框是左浮动的，并且存在由源文档中较早的元素生成的任何左浮动框，则对于每个此类较早的框，当前框的左外边缘必须位于前一个框的右外边缘的右侧，或者其顶部必须低于前一个框的底部。类似的规则也适用于右浮动框。
- 左浮动框的右外边缘不能在它旁边的任何右浮动框的左外边缘的右边。类似的规则也适用于右浮动元素。
- 浮动框的外部顶部不能高于其包含块的顶部。当浮动发生在两个折叠边距之间时，该浮动的位置就好像它有一个原本为空的匿名块父级参与了流。此类父级的位置由边距部分中的规则定义。浮动框的外部顶部不能高于由源文档中较早的元素生成的任何块或浮动框的外部顶部。元素的浮动框的外部顶部不能高于包含由源文档中的较早的元素生成的框的任何行框的顶部。
- 左侧具有另一个左侧浮动框的左侧浮动框不能具有其右侧位于其包含块的右边缘右侧的外边缘。(宽松地说:左浮动可能不会在右边缘突出，除非它已经尽可能地靠左了。)一个类似的规则适用于右浮动elements.
- A浮动框必须放置在与possible.
- A一样高的位置-左浮动框必须尽可能地放在左边，右浮动框必须放在尽可能右边的地方。与离left/right.
更远的位置相比，更高的位置更好
正如你所看到的，浮动的盒子倾向于放在最上面。如果你要浮动其他的盒子，那么顺序就很重要了。如果只有一个浮动，它就会把其他的都推来推去。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6537530
复制相关文章
相似问题
腾讯云开发者
