margin日常用法：设置外边距
进一步描述：它不是让元素移动xxpx，而是这个元素的旁边必须有xxpx的空白
带着这个概念遇到重叠，随之抛出一系列问题，为什么会重叠？重叠的场景？如何消除重叠？
1、为什么会重叠
CSS规范中的一种特性。。。那当初为何定这个规范？相关资料反馈HTML文档创建的初衷只是用来展示信息的，
若没有重叠，会出现连续段落或列表设置margin后排版不自然等问题~
🍄 根据事物的两面性，解决问题的同时也会带来新的麻烦，故需整理重叠的场景有哪些，达到趋利避害
2、重叠的场景
- 只发生在垂直方向上，且元素为块元素，无浮动，无绝对定位
3、如何消除重叠
1）场景一：兄弟元素
<p style="margin: 20px 0">1</p>
<p style="margin: 20px 0">1</p>
解决方案：
给兄弟元素包一层， 并在对应父元素上设置border、padding、创建BFC块格式化上下文(如overflow:auto;值非visibility）都可以避免上下外边距重叠，如图一所示 （此外重叠时，采用两者之间边距最大的那个值，如图二所示）:
<p style="margin: 20px 0">1</p>
<p style="overflow: auto">
<p style="margin: 20px 0">1</p>
</p>
图一：
图二：
2）场景二：父子元素
<div style="margin-top:50px;">
<div style="margin-top:50px;">1</div>
</div>
解决方案：
父元素设置border、padding、创建BFC块格式化上下文（如overflow:auto;值非visibility）都可以避免上下外边距重叠，如下图所示:
<div style="margin-top:50px;overflow:auto">
<div style="margin-top:50px;">1</div>
</div>
margin-bottom同理:
<div style="margin-bottom:50px">
<div style="margin-bottom:50px;">1</div>
</div>
改为:
<div style="margin-bottom:50px;overflow:auto">
<div style="margin-bottom:50px">1</div>
</div>
参考资料：
