第三个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的时候,就只有两行,没有出现滚动条)。
所以,这里出现了先有鸡还是先有蛋的问题,不知是怎么回事?
Bao725
9 years, 4 months ago