firefox中div+css的外層背景色不見的解決方法

 代碼如下:

<div class="header">
<div class="header_left">header_left</div>
<div class="header_right">header_right</div>
</div>
.header{width:1000px;background:red;}
.header .header_left{width:600px;background:green;float:left;}
.header .header_right{width:400px;background:pink;float:right;}
.clear{clear:both;}

這樣的div+css 在ie和chrome中都正常，但是firefox中header的背景色顯示不出來，
在.header_right標簽後面加上 <div class="clear"></div>，外層的背景色是顯示沒有問題，
但是 在.header上方出現了去不掉的空行，網上找到的解決方法是，在外層div的css樣式中加上

  代碼如下:
overflow:hidden;

結果確實可以解決問題，但是原因 O(∩_∩)O~ 待查 ......