第一种情况：相邻元素垂直外边距合并问题
<div class="div1">
</div>
<div class="div2">
</div>现在有两个垂直排列的盒子，我们设置了上边盒子的下外边距为100px，下边盒子的上外边距为50px，想要实现两个盒子的垂直边距为150px，但实际上两个盒子垂直方向上的外边距发生了重合，实际边距取了两者margin之间的最大值
解决方案如下：
1. 避免使用这种写法，要么设置上边元素的下边距，要么设置下边元素的上边距，不要同时设置，即可以设置第一个盒子的margin-bottom为150px，也可以设置第二个盒子的margin-top为150px
2. 将其中一个盒子包裹在一个div中，使用这个div去触发BFC，设置该div的样式为overflow:hidden，不明白的话可以参考下面的代码
<style>
.div1 {
width: 200px;
background-color: pink;
height: 199px;
margin-bottom: 100px;
}
.div2 {
width: 200px;
height: 200px;
margin-top: 50px;
background: purple;
}
.bfc {
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="bfc">
<div class="div2">
</div>
</div>
使用以上任何一种解决方案既可以实现两个盒子的垂直边距为150px
第二种情况：
嵌套的两个块元素出现垂直外边距合并问题。
<div class="father">
<div class="child">
</div>
</div>我们要实现子元素距离父元素上边框50px，正常有两种解决方案，一种是使用父元素的内边距padding，一种是使用子元素的外边距margin，但是当设置子元素的margin为50px后出现了下面这种神奇的现象，父元素有了50px的上外边距，而子盒子的上边距仍然与父元素重合。
解决方案如下：
1. 给父元素设置非零px的上边框或者内边距
border-top: 1px solid pink; 或者 padding-top: 1px;2. 为父元素设置overflow:hidden，触发BFC，这样就不会影响元素外部布局
使用以上任何一种解决方案以后，效果如下
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
