首页 > 第三个div清除浮动后,第二个div的位置为什么会发生变化?

第三个div清除浮动后,第二个div的位置为什么会发生变化?

<style>
    #div1{
        width:200px;height: 200px;background: red;float:left;
    }
    #div2{
        width:800px;height:400px;background:green; float:right;
    }
    #div3{
        width:100px;height: 200px;background: yellow;float:left;
        clear:right;//没加之前是第一种情况,加了后是第二种情况
    }
</style>

再补充一点:
我发现当我给这三个div再加一个父div并把宽度设置为1000px后,就不会出现这种情况了。

而如果我没有给父div加>=1000px的宽度的话,它就仍然会出现上面所讲到的情况。

我还发现,第二个之所以会往下走,是因为清除浮动的时候,黄色的div(也就是第三个)往下走了一段,而这时右侧出现了个滚动条,滚动条占据了一定的宽度,所以,整个屏幕的宽度就小于1000px了,于是,第二个div就只能从第一行跑到第二行去了。

但是,这仍然说不通。因为滚动条的出现,正是因为第二个跑到第二行去了(总共三行了)才需要滚动条,如果前两个在同一行的话,即使第三个清除了浮动,右侧仍然是不需要滚动条的(设置父div宽度为1000px的时候,就只有两行,没有出现滚动条)。

所以,这里出现了先有鸡还是先有蛋的问题,不知是怎么回事?


楼主,你这是清除右侧浮动,所以影响了你的第二个,要是clear:both的话就不会影响了

【热门文章】
【热门文章】