CSS：兄弟或父子元素垂直外边距重叠的问题

兄弟元素

如两个元素相邻，且上面的元素有margin-bottom，下面的元素有margin-top，则两元素之间的间距是margin-top和margin-bottom中大的那个，而不是两者之和

<div class="div1"></div>
<div class="div2"></div>

.div1{
	height: 200px;
    width: 200px;
    background-color: red;
    margin-bottom: 20px;		/* div1下外边距为20px */
}
.div2{
	height: 200px;
    width: 200px;
    background-color: pink;
    margin-top: 10px;			/* div2上外边距为10px */
}

父子元素

如一对父子元素，父元素没有padding-top和border-top，那么父元素的margin-top和子元素的margin-top将会发生重叠，即取两者间的最大值

<div class="div1">
	<div class="div2"></div>
</div>

.div1{
	height: 200px;
    width: 200px;
    background-color: red;
}
.div2{
	height: 100px;
    width: 100px;
    background-color: pink;
    margin-top: 10px;			/* div2上外边距为10px */
}

解决方案
通过设置父元素的before伪类，在子元素的前面添加一个空白的table

.div1::before{
	content: "";
    display: table;
}

总结

将高度塌陷和垂直外边距重叠的问题一起解决的方案如下

.clearfix{
	zoom:1;
}
.clearfix::before,
.clearfix::after{
	content: '';
	display: table;
	clear: both;
}