外边距合并问题及解决方案

BFC：
       边距重叠解决方案 BFC（块级格式化上下文）：
         一. BFC的原理:
            内部的box会在垂直方向，一个接一个的放置
             box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的 margin会发生重叠
             bfc的区域不会与浮动区域的box重叠
             bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也 不会影响外面的
           二.创建BFC：
                    float属性不为none（脱离文档流）
                    position为absolute或fixed
                    display为inline-block,table-cell,table-caption,flex,inine-flex
                    overflow不为visible
           三.应用场景:
                    自适应两栏布局、清除浮动、防止垂直margin重叠

1. 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是 取两个值中的 较大者这种现象被称为相邻块元素垂直外边距的合并 。

解决方案：
尽量只给一个盒子添加 margin 值。

2. 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。 使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。