margin上下重叠bug

margin上下重叠bug
当同一级别的俩个元素垂直时候，就会出现一个奇怪的现象，当给上面用Margin-bottom,下面的用margin-top时候就算值一样也只会用一个，或者取谁大的值
下面我们通过图就能看出来了
当我们给上面一个元素margin-bottom 一个50px 给下面一个morgin-top 60px我们来看看她们的效果

很明显可以看出来他们的值不是想加而是取最大值这就是在浏览器中同一个bfc中会出现这种重叠情况，也是浏览器的一个Bug而左右的margin值是没这个Bug的
那我们怎么解决了？其实有很多方法
我就来说一种很简单的给下面一个Div外面嵌套一个div在形成一个bfc规则
然后给外面div加上 overflow:hidden
然后就能解决

效果图如下；

就能解决
当然还有很多方法能解决比如给加浮动不过如果后面还有其他元素就还要清除
方法很多都是需要我们自己去思考的。
逆战班