css的盒子外边距margin会重叠

在css里有一个奇怪的特性，就是两个或多个盒子(可能相邻也可能是父子)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
相邻盒子边界的计算方式：

1. 全部都为正值，取最大者
2. 不全是正值，则都取绝对值，然后用正值的最大值减去绝对值的最大值
3. 没有正值，则都取绝对值，然后用0减去最大值。

解决方法：
任意一个盒子触发bfc；两个盒子统一用margin-top或margin-bottom

父子盒子边界的计算方式
父盒子如果没有border和padding的话，子盒子的margin会传递给父盒子，最后的margin计算方式同上。
解决方法：
父盒子触发bfc；父盒子加上border或padding。