我对外边距折叠的理解对吗？

<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是在绿线的位置吗？

如图：

这里有一个关键点， div.box3{clear: both}，它清除了浮动，让 div.box 能够被子元素撑开。

外边距的合并只会发生相邻块级元素在垂直方向的外边距上,如果元素设置了内边距或边框，那么合并就不会发生
我们看一个例子:
CSS:

ul {margin-bottom: 15px;}
li {margin-top: 10px; margin-bottom: 20px;}
h1 {margin-top: 0px;}

HTML:

<ul>
    <li>12345678</li>
</ul>
<h1>ABCEDFGHIJK</h1>

ul,li,h1都没有设置内边距和边框，那么ul和li首先发生外边距合并，h1元素文字顶部和li元素文字底部的距离为20px而不是15+20=35px;
接下来:

h1 {margin-top: 28px;}

现在h1的上外边距和li的下外边距合并，取大值，结果就是h1的元素顶部和li元素的底部的距离为28px；

如果

ul {
margin-bottom: 15px;
border:1px solid #cccccc;
}

因为ul设置了border，那么其ul和li不会发生外不边距合并，li距离ul底部的距离为20px,
但是和h1会发生外边距合并，ul边框和h1元素文字的距离为28px
设置padding也是如此（此时的ul的计算距离的位置要加上padding的距离，设置border时要算上border的宽度）

总之，相邻块级元素没有border和padding就可以发生垂直外边距合并

我对外边距的折叠是这么理解的：

如图两个box：


 div.box1{
        margin-right:10px;
        }
 div.box2{
       margin-left:10px;
        }

分别设置两个盒子的margin，得到的是两个box的距离是10px：

而不是两个box的距离是20px：

同样的道理，上下排列的box,margin设置的距离也会折叠。

【热门文章】