子标签的margintop为什么不能撑开父标签的高度？

Question

html<div class="a">
    <div class="b">bbbbbbb</div>
</div>

cssbody {
    padding: 0;
    margin: 0;
}
.a {
    background: red;
}
.b {
    background: blue;
    margin-top: 10px;
}

http://jsfiddle.net/nhk6g1qx/1/
父标签高度没有被撑开但留出了10像素的高度

而给a增加padding-top:10红色背景顶部出现了20的高度
http://jsfiddle.net/nhk6g1qx/4/

Answer 1

子和父的 margin 发生了折叠，可设置父元素 overflow:hidden; 触发 BFC 解决：http://jsfiddle.net/nhk6g1qx/5/

具体参见这个答案：http://segmentfault.com/q/1010000002645174/a-1020000002646638

Answer 2

这是因为垂直方向的margin会重合，有三种方法修复这个问题
1. 给父元素添加border或padding（top）
2.float父元素
3.设置父元素的position
。。。

Answer 3

深入理解BFC和Margin Collapse
CSS之BFC详解

Answer 4

参考 http://blog.aijc.net/css/2014/08/05/CSS%E7%9B%92%E6%A8%A1%E5%9E%8B/ 中关于外边距折叠的内容