Solution to the div+css of the outer background color of Firefox

The code is as follows:

<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;}

Such div+css are normal in IE and chrome, but the background color of the header in Firefox is not shown.
After the. Header_right tag, add the <div class= "clear" ></DIV> the background color of the outer layer is displayed without problems,
But there is a blank line above the header, and the solution on the Internet is to add the CSS style of the outer div

The code is as follows:
Overflow:hidden;

The results do solve the problem, but the reason O (∩_∩) o~ is not available ...