前端开发过程中，是否碰到这样一个场景，同时设置了上部元素下边距和下部元素上边距，发现实际的边距竟然不是两个外边距之和，这就是我们这里讲的css 外边距重叠了
css外边距重叠通常发生在 block 块级元素中(flex、inline不会出现)，且只包括上下边距，左右边距不会重叠
有三种场景会出现边距重叠问题：
场景一：两个子节点同时设置上下边距
出现了两个子节点，分上部元素下边距(margin-bottom)和下部元素上边距（margin-top），此时，两者边距会出现以下合并场景
- 两者均为正、均为负，取绝对值的最大值
- 两者一正一负，取他们的和
场景二：父子节点的元素穿透
父节点没设置margin-top，子节点设置了margin-top，则子节点的margin-top则会穿透到父节点产生间距，当然这种场景一般我们直观感觉不到，确实存在这种场景
场景二：空元素上下边距重叠
一个空元素的存在，且设置了上下边距，一般我们认为就是一个占高的元素，通常我们会直接设置height，如果同时设置了margin-top、margin-bottom，则上下边距会重叠选择最大值，合并成他的占位高度，这个见到的非常少了
ps：我们正常编写为了避免出现此类问题，可以尽量使用 BFC 场景，例如：我们使用flex布局，子元素就不会出现重叠了