极客观点
项目管理
HarmonyOS
<!doctype html>
<html>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
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，显示符合预期。
能帮忙解释下为什么会发生这种情况吗？理解不能。
c2 加上了
margin-top会穿过 c1 直接作用于 body，这是由于外边距叠加，当初就是这么设计的。。。很正常。但 如果把 c1 设置
overflow-hidden就会在 c1 上触发 BFC，外边距叠加就会被取消了。