外边距折叠问题

外边距折叠的概念

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

普通流概念：

只要不是float、absolute、root element时就是普通流。

外边距折叠的产生条件

*都属于普通流的块级盒子且都参与到相同的块级格式化上下文中；
*没有被padding、border、clear和line box 分隔开
*都属于垂直毗邻盒子边缘；
（1）盒子的top margin和它的第一个普通流子元素的top margin
（2）盒子的bottom margin和它的下一个普通流兄弟的top margin
(3) 盒子的bottom margin和它父元素的bottom margin
(4) 盒子的top margin和bottom margin，且没有创建一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素

外边距折叠的结果

1.如果外边距都为正数，折叠结果为大的正数；
2.如果外边距一个为正数一个为负数，折叠结果为最大正边距和最小负边距的和；
3.如果外边距都为负数，折叠结果为最小负边距的值；

如何避免外边距折叠

避免外边距折叠的方法：
1.给父元素添加border
2.给父元素增加padding
3.父子元素之间添加触发BFC的元素