CSS 垂直外边距的 [重叠] [塌陷] 问题

上下外边距合并（重叠）

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

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

一般这种情况不需要解决，只需要设置其中一个的外边距即可

或者给其中一个加上父元素，不在同级即可

---

外边距塌陷

当一个元素包含在另个元素中时（假设没有内边距或边框把外边距分隔开），它们的上外边距/下外边距也会发生合并，合并后的外边距高度等于两个外边距高度较大的那一个。

只设置了子元素的上外边距时，子元素未移动，而是父元素向下移动相等距离，也属于外边距塌陷

解决方法：

1. 父元素加上一个边框 border-top: 1px solid #ffff;
2. 父元素设置绝对定位 position: absolute;
3. 父元素设置为行内块元素 display: inline-block;（table-cell / flex / inline-flex 都可以）
4. 父元素设置浮动 float: left;
5. 父元素设置溢出部分隐藏 overflow: hiddle;（overflow ≠ visible 即可）

 2-5的解决方法我们叫做“触发盒子的BFC模型”