margin 的问题

1.margin的折叠问题：

 在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。

这种折叠现象只会在常规文档流中出现，而绝对定位、浮动、inline-block等元素不会出现折叠现象。

只有垂直方向的外边距会发生外边距叠加。水平方向的外边距不存在叠加的情况。

计算方法：

两个相邻Box的margin外边距都是正数时，折叠外边距是两者中较大的值
两个相邻Box的margin外边距都是负数时，折叠外边距是两者中绝对值较大的值
两个相邻Box的margin外边距一正一负数时，折叠外边距是两者相加的和
2.margin的上下传递问题：

margin-top的传递：
如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
2.margin-bottom的传递问题：
如果块级元素的底部线和父元素的底部线重叠，那么这个块级元素的margin-top值会传递给父元素
3.解决方法：
给父元素设置padding-top或padding-bottom，防止顶部线或底部线重叠即可；
给父元素设置border，可以解决边距传递的问题；
触发BFC（Block Format Context，块级格式化上下文），简单理解就是给父元素设置一个结界，防止上下边距传递出去（最优解决方案）。触发BFC有以下方式：
添加浮动float（float的值不能是none）；
设置一个非visible的overflow属性（除了visible，其他属性值都可以，像hidden、auto、scroll等）；
设置定位position（position的值不能是static或relative）；
设置display的值为inline-block、table-cell、flex、table-caption或inline-flex；