Cross-browser issue: Different interpretations regarding "overflow:hidden" and "float:left" between chrome and firefox

http://jsfiddle.net/a34qkx8k/

HTML

<div class="upper">
    <div></div>
</div>
<div class="lower">
    <div class="hid">
        <div ></div>
    </div>
</div>

CSS

.upper {
    background:black;
    height:80px;
}
.upper div {
    width: 100px;
    height: 50px;
    background-color: yellow;
    float: left;
}
.lower {
    margin-top:-60px;
}
.lower > div {
    width: 100%;
    background: green;
}
.lower > div.hid{overflow:hidden}
.lower>div>div {
    width:100px;
    height:100px;
    background:red
}

The displays of above HTML on Firefox and Chrome are different, I know it has something to do with “overflow:hidden”, but I don’t know what exactly is causing this issue. Is there any elaborate document about this different behavior among the two major browsers?
And, ‘overflow:hidden’ seems to affect the document flow, what is the theory behind this behavior?


Source: cross-browser

Leave a Reply