极客观点
项目管理
HarmonyOS
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>margin</title>
</head>
<body>
<style>
#container{
background-color: red;
width:2000px;
height:600px;
}
#div1{
background-color: blue;
width:500px;
height: 100px;
margin-top:10px;
}
</style>
<div id ="container">
<div id="div1"></div>
</div>
</body>
</html>目的是想让div1的上边和container的下边距离是10px，但是用firefox和IE8发现都没有效果，但是如果给div1加上float:left之后就有效果了，这是为什么？ 是我哪里理解错了吗？谢谢。
这是因为 margin 会 collapse （坍塌）。
发生坍塌的条件。
简单理解就是竖向、块元素、同个 BFC、邻近。
加 float 相当于打破了“同个 BFC”。
打破“邻近”可以是content（隔着其它节点）、padding、border、clearance（清除浮动时加上的空白）。
例子可以换为给
#container加padding-top。