css+div布局firefox和ie的不同表现

HTML code

<div style="height:500px; width:300px;" >
<div style="width:30%; height:50%; background-color:Green; float:left;"></div>

<div style="width:30%; height:50%; background-color:Red; float:left; clear:left;"></div>
<div style="width:70%; height:100%; background-color:Yellow; float:right;"></div>

</div>

这个当中IE下正常，firefox下布局错乱。。

HTML code

<div style="height:500px; width:300px;" >
<div style="width:30%; height:50%; background-color:Green; float:left;"></div>
<div style="width:70%; height:100%; background-color:Yellow; float:right;"></div>
<div style="width:30%; height:50%; background-color:Red; float:right;"></div>


</div>
这样的话两者都正常。。

请问情况1为什么firefox下不行呢？请指教！~谢谢~~

<div style="height:500px; width:300px;" >
<div style="width:30%; height:50%; background-color:Green; float:left;"></div>
<div style="width:70%; height:100%; background-color:Yellow; float:right;"></div>
<div style="width:30%; height:50%; background-color:Red; float:left;clear:left;"></div>
</div>
里面三个div的嵌套顺序又问题，改成这样试试，应该可以了，也就是将第二个div和第三个颠倒一下