（以下所有内容仅用以记录学习过程中的个人理解，如有错误欢迎指出）
外边距合并
当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距高度等于两个外边距中高度较大的那一方。
上下外边距合并
父子外边距合并
（没有父元素边框或内边距把外边距分隔开的情况）
空盒外边距合并
（一个空元素，没有内边距、边框、填充）
（上述空元素，碰到另一个外边框）
所以就算写了很多这种的段落元素，占用空间也很小。
发生合并的原因
解决合并问题的方法
（适用上下、父子）垂直方向下的两个边距改写成一个。——方法1，less ok。
（适用父子、空盒）增加透明的内边距/边框，但可能增加了多余样式。——方法2，less ok。
（适用父子）父子元素之间添加<table>标签，但增加了多余的结构。——方法3，less ok。
<div class='box1'>
<table></table>
<div class='box2'></div>
</div>
（适用父子）父元素通过 :before 伪元素，添加一个空白table元素。——方法4，ok。
.clearfix: before{
content："";
display:table;
}
<div class='box1 clearfix'>
<div class='box2'></div>
</div>
可以考虑和高度塌陷一同解决，如下：
.clearfix: before,
.clearfix: after,{
content："";
display:table;
clear:both;
}
<div class='box1 clearfix'>
<div class='box2'></div>
</div>
<div class='box3 clearfix'>
<div class='box4'></div>
</div>