html css布局margin错误的问题，很简单的

Question

body{margin:0;}.c1{width:300px;height:200px;background-color:red;}.c2{width:300px;height:50px;margin-top:100px;background-color:green;}以我的理解，c1层与body不会有margin,也就是红色的c1层靠浏览器顶部显示，而c2层由于margin-top:100px，所以绿色的c2层应该距c1层顶部100像素，可事实是c1层距顶部100了。如果在c1层加上overflow:hidden，显示符合预期。能帮忙解释下为什么会发生这种情况吗？理解不能。在线预览:http://runjs.cn/detail/x0bpu6ml

Answer 1

c2加上了margin-top会穿过c1直接作用于body，这是由于外边距叠加，当初就是这么设计的。。。很正常。
但如果把c1设置overflow-hidden就会在c1上触发BFC，外边距叠加就会被取消了。