css图文混排效果

HTML code

<div style="width:400px; height:200px; overflow:hidden;">
<div style=" float:left; width:0px; height:120px;"></div>
<div style=" float:left; width:60px; height:60px;background-color:#F00;clear:left;"></div>

<p>内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容内容  内容</p>
</div>

  这效果在ie8 火狐浏览器效果都是对的，但ie6和360浏览器红色区域就跑上去了；
这是什么问题呢？ 如果这方法是错误的，那还有撒方法做到这种效果不。。。

问题出在哪里啊！