跨浏览器问题：关于＆＃34;溢出的不同解释：隐藏＆＃34;和＆＃34;浮动：左＆＃34;介于chrome和firefox之间

Question

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
}

Firefox和Chrome上面HTML的显示不同，我知道它与＆＃34; overflow：hidden＆＃34;有关，但我不知道究竟是什么导致了这个问题。在两个主流浏览器中是否有关于这种不同行为的详细文档？ 而且，＆＃39;溢出：隐藏＆＃39;似乎影响了文档流程，这种行为背后的理论是什么？