第三个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的时候，就只有两行，没有出现滚动条）。

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