这是我参与更文挑战的第5天，活动详情查看： 更文挑战
说一下你理解margin重叠的问题
块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距，这样的现象称为"margin合并"
产生折叠的必备条件: margin必须是邻接的，而根据w3c规范，两个margin 是邻接的必须满足以下条件:
- 必须是处于常规文档流(非float和绝对定位)的块级盒子，并且处于同一个 BFC 当中。
- 没有线盒，没有空隙，没有padding和 border 将他们分隔开。
- 都属于垂直方向上相邻的外边距，可以是下面任意一种情况
- 元素的margin-top与其第一个常规文档流的子元素的margin-top
- 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
- height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
- 高度为0并且最小高度也为0不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和 margin-bottom
margin合并的3种场景:
- 相邻兄弟元素margin 合并。 解决办法:设置块状格式化上下文元素(BFC)
- 父级和第一个/最后一个子元素的margin合并。解决办法:对于margin-top合并，可以进行如下操作(满足一个条件即可):
- 父元素设置为块状格式化上下文元素;父元素设置 border-top 值;
- 父元素设置 padding-top 值;
- 父元素和第一个子元素之间添加内联元素进行分隔。
对于margin-bottom合并，可以进行如下操作(满足一个条件即可)
- 父元素设置为块状格式化上下文元素;父元素设置 border-bottom 值;
- 父元素设置 padding-bottom 值:
- 父元素和最后一个子元素之间添加内联元素进行分隔:
- 父元素设置 height、 min-height 或 max-height。
- 空块级元素的margin合并。解决办法:
- 设置垂直方向的 border;
- 设置垂直方向的 padding;
- 里面添加内联元素(直接Space键空格是没用的);设置 height 或者 min-height.
总结
margin重叠指的是在垂直方向上，两个相邻元素的margin发生重叠的情况。一般来说可以分为四种情形:
第一种是相邻兄弟元素的 marin-bottom和margin-top 的值发生重叠。这种情况下我们可以通过设置其中一个元素为 BFC来解决。
第二种是父元素的margin-top和子元素的margin-top发生重叠。它们发生重叠是因为它们是相邻的，所以我们可以通过这一点来解决这个问题。我们可以为父元素设置border-top、padding-top 值来分隔它们，当然我们也可以将父元素设置为BFC来解决。
第三种是高度为auto的父元素的margin-bottom和子元素的 margin-bottom 发生重叠。它们发生重叠一个是因为它们相邻，一个是因为父元素的高度不固定。因此我们可以为父元素设置 border-bottom、padding-bottom 来分隔它们，也可以为父元素设置一个高度，max-height和 min-height 也能解决这个问题。当然将父元素设置为BFC是最简单的方法。
第四种情况，是没有内容的元素，自身的margin-top和 margin-bottom 发生的重叠。我们可以通过为其设置 border、padding 或者高度来解决这个问题
