No.003 外边距合并问题

（以下所有内容仅用以记录学习过程中的个人理解，如有错误欢迎指出）

1. 外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距高度等于两个外边距中高度较大的那一方。

1.1 上下外边距合并

1.2 父子外边距合并

（没有父元素边框或内边距把外边距分隔开的情况）

1.3 空盒外边距合并

（一个空元素，没有内边距、边框、填充）

（上述空元素，碰到另一个外边框）

所以就算写了很多这种的段落元素，占用空间也很小。

1.4 发生合并的原因

2. 解决合并问题的方法

（适用上下、父子）垂直方向下的两个边距改写成一个。——方法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>