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

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
慕容森
浏览 401回答 2
2回答

largeQ

c2加上了margin-top会穿过c1直接作用于body,这是由于外边距叠加,当初就是这么设计的。。。很正常。但如果把c1设置overflow-hidden就会在c1上触发BFC,外边距叠加就会被取消了。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript