什么是外边距重叠？以及怎么解决？
外边距重叠是指相邻或嵌套的块级元素的垂直外边距会合并成一个外边距，取较大值。
发生情况：
-
相邻兄弟元素：上下外边距会重叠
-
父子元素：子元素的上外边距和父元素的上外边距重叠
-
空元素：元素自身上下外边距重叠
解决方式：
-
BFC（块级格式化上下文）：给父元素设置overflow: hidden、display: flex、position: absolute等
-
padding替代：用padding代替margin
-
border：给父元素添加透明border
-
浮动或定位：使用float或position
-
flex布局：使用flex容器
最常用的是BFC方案，比如给父元素加overflow: hidden就能阻止父子元素的外边距重叠。
这个问题在布局时经常遇到，特别是垂直方向的间距控制。