如何处理margin中的合并和叠加现象

什么是margin合并？

在实际的网页开发中，我们经常会遇到一些不符合预期的情况，就比如两个div之间设置的margin会进行合并和叠加的现象，我们应该如何处理和防止这样的情况发生。

兄弟关系中的margin合并和叠加

两个上下div的margin中会进行一个合并，只显示最大的margin值，如下图

另外需要提一嘴的是，两个兄弟关系中的左右div元素设置margin，还会发生左右的margin叠加现象

父子关系中的margin合并

在嵌套关系中的两个块级元素中，只要给子元素中设置一个margin-top，这个时候父元素就会跟着子元素一起向下进行移动，这种现象也可以称之为margin的塌陷现象。

如何解决？

在兄弟关系元素中
可以使用BFC（块级格式化上下文）来进行解决，可以将两个div相互进行隔绝，形成一个独立的环境，不会相互影响。
在父子关系元素中

1. 给父元素中设置一个border-top属性；
2. 给父元素中设置一个padding-top属性；
3. 给父元素中设置一个overflow属性，会触发BFC;
4. 给父元素设置一个float，会触发BFC；
5. 将子元素设置为行内块元素，修改形成塌陷的条件；