Firefox下浮动布局时空白边叠加问题

  在Firefox下,如果采用div+css浮动控制页面布局时,如果一个div设置了margin-top,并且使用clear:both清除浮动时,margin-top并未显示出来,而是和处于其上面的浮动div叠加在一起了。源代码如下所示,结果如图1所示
+展开
-HTML
<style type="text/css">
.outerDiv{padding:4px;border:solid 2px black;}
.innerDiv{border:solid 2px #ff7f27;height:50px;}
</style> 
<div class="outerDiv" style="width:300px;height:334px;float:left;margin-right:50px;"><div class="innerDiv"></div></div>

<div class="outerDiv" style="width:180px;height:290px;float:left;margin-right:50px;"><div class="innerDiv"></div></div>

<div class="outerDiv" style="width:800px;height:100px;margin-top:50px;clear:both;"><div class="innerDiv"></div></div>


Firefox清除浮动时导致的空白边叠加
图1 Firefox清除浮动时导致的空白边叠加

  但是在IE6下不会出现此问题。
IE下清除浮动时空白边未叠加
图2 IE下清除浮动时空白边未叠加

  要解决空白边叠加的问题,需要多加一个清除浮动的标记,更改过后代码如下,这样就不会出现空白边叠加了