极客观点
项目管理
HarmonyOS
<html>
<style type="text/css">
div.box{
margin:0px;
width:105px;
height:200px;
border-top:4px solid green;
}
div.box1{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box2{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box3{
clear:both;
width:100px;
height:50px;
border:1px solid red;
}
</style>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body></html>
对于这个例子，box3的margin-top是在绿线的位置吗？
我对外边距的折叠 是这么理解的：
如图两个box：
分别设置两个盒子的margin，得到的是两个box的距离是10px：
而不是两个box的距离是20px：
同样的道理，上下排列的box,margin设置的距离也会折叠。