margin issue in FireFox

Question

I have a margin issue in Firefox which totally works in other browsers so, this is my HTML

HTML:

//*** means some code

<header>
    <div class="left">
        <div class="logo">
            //***
        </div>
    </div>

    <div class="right">
        <div id="log-on">
            //***
        </div>
    </div>
    <div class="clear"></div>
</header>
<section class="search-seaction">
    //***    
</section>

CSS:

.clear { clear:both; }

.left { float: left }

.right { float: right }

.search-seaction
{
    margin-top: 62px;        
}

and here is screenshots

Firefox:

Opera & Chrome:

That margin over header appears only in Firefox. What is the reason of that behavior?

ISSUE : when I give margin to section, the header is "margining"

Answer 1

Try giving the header a height:

header {
  height: 100px;
}

(setting the overflow to hidden works too)

header {
  overflow: hidden;
}