浅谈外边距合并的问题

外边距合并问题，根据w3school中首先水平外边距不会重合，而垂直方向的外边距可能会发生重合，并且主要是在常规流中。常规流向中两个或多个块级元素相邻(其间没有任何非空内容、padding、边框等)的垂直外边距可能会重合。
所以当元素使用了浮动(float),绝对定位(absolute),或者改变display:inline-block;都不会产生这种现象。
计算的方式为:两个块级元素的外边距，当全是正值，取其中最大，一正一负，取它们相加的结果，当全为负值取，最小的那个。

1.当2个块级元素是兄弟级时候

虽然2个块级元素同为兄弟元素并且都给了外边距50px，但是因为外边距合并的原因，他们的间距只有50px
当改变第二个块级元素的display属性的时候，这种外边距合并的就消失了

2.当2个块级元素是父子级时候

给子元素一个上外边距50px，结果没有到达自己想要的效果，反而让父级元素跟着自己向下移动50px，因为父子级关系，子元素的包含块是父元素的内容盒，而父元素没有写边框跟内边距的原因，导致子元素的外边距跟父元素的外边距合并了，从而导致都向下50px。
解决方法给父元素加边框或者内边距或者创建BFC（overflow:hidden;即让父元素里面变化不影响外部)


这些都可以到达自己的效果。
希望我的讲解能让您听懂，如果讲得不对的地方，欢迎大佬指正和补充，谢谢