Firefox和Chrome对“overflow:hidden”的不同解读

Question

FIDDLE： http://jsfiddle.net/a34qkx8k/

HTML

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

在Chrome和Firefox上，上面的代码显示不同，我知道这跟“overflow：hidden”有关系，但是我不明白为什么overflow：hidden会造成这样的差别。还有Overflow：hidden似乎对文档流也有影响，请问具体是怎么影响的，哪里可以看到关于Overflow：hidden的这种特性的相关文档？

Answer 1

参考 http://www.w3help.org/zh-cn/kb/010/

或者搜索关键字 BFC（块级格式化上下文）