float浮动的小问题~_html/css_WEB-ITnose

<div style="background:red; width:100px; height:100px; "></div><div style="background:green; width:100px; height:100px; float:left;"></div>

效果：


问题：
我觉得第二个div向左浮动，是应该覆盖第一个div啊？因为它已经脱离文档流了，为什么还是在第一个div下边呢？

谢谢！

回复讨论(解决方案)

设置绝对定位position: absolute;

设置绝对定位position: absolute;
这个我知道。我问的是为什么这个浮动不上去

谁能帮我解答一下啊？？

浮动不是脱离文档流
你从哪看来的?
块级元素左右不能有并排的元素的，要不就设置浮动或者定位
你第一个div没有浮动，也没有定位，所以第二个浮动div自然跑下面去了

脱离文档流是绝对定位或者固定定位

float本来就不会覆盖

浮动的定义 可以参考
http://www.w3school.com.cn/css/css_positioning_floating.asp

楼上的??++++

第一个也要浮动

div是块级元素，第一个div你没有设置成float所以他会占用整个一行。第二个虽然浮动了但是他也不会占用第一个div的地方。如果你把两个反过来写的话，他们就会重叠了。

第一个div占据了一行,所以第二个的div浮动相当于从第二行开始浮动的,如果你想要你说的效果你可以把两个div的位置互换,第二个放在第一位,就会被覆盖,原理就是第一个因为是浮动,就脱离了文档流,所以第二个div出现在了第一个位置,然后第一个div会浮动过去覆盖掉第一个div 就是这样子了

第一个div占据了一行,所以第二个的div浮动相当于从第二行开始浮动的,如果你想要你说的效果你可以把两个div的位置互换,第二个放在第一位,就会被覆盖,原理就是第一个因为是浮动,就脱离了文档流,所以第二个div出现在了第一个位置,然后第一个div会浮动过去覆盖掉第 二个div 就是这样子了
不好意思 错别字了

嗯，谢谢大家的回答！

这样就出现了你说的效果。。。。。