margin塌陷 和 margin合并 两个BUG

Margin塌陷：
正常情况：


如上所示：.wrap设置了margin-left就相对与他的父级元素向右移动了100px;
.box设置了margin-left就相对与他的父级元素(.wrap)向右也移动了100px

但是：如果在垂直方向设置margin-top,或者margin-bottom就会跑bug(如下代码和现象)

由上面代码我们可以知道：.wrap设置了margin-top后，就相对于他的父级向下移动了100px；
而.box设置了margin-top后，并没有相对于他的父级（.wrap）向下移动了100px；

下面改变.wrap 和 .box 的margin-top大小来看一下跟明显的现象：
改变1：

改变2：

由改变2知道：子级元素.box改变了margin-top,使得比父级（.wrap）的margin-top还要大。这样.box就带动了.wrap一起向下移动，就好像.wrap的上顶不见了一样，我们称这个bug为margin塌陷。
解决方法：触发BFC
1),display: inline-block;
2),position: absolute;
3),overflow: hidden;
4),float: left;/right;
上面四个方法都可以来弥补这个bug带来的开发缺陷，根据自己开发需要选择使用。

Margin合并：
正常情况：

.box1 和 .box2 会因为margin-right ，margin-left隔开一段距离（两者像素和）

但是下面情况就会出现bug
case1：

case 2：

case 3：

对比 case 1 和case 2得：case 2的.demo2加了margin-top：100px;后，
并没有使.demo1和.demo2的上下距离拉大，而是没有变化。
对比 case 2 和case 3得：case 3 改变了两个.demo的margin-top/margin-bottom的像素值，但是.demo1和.demo2的上下距离也就只有300px
当两个同级的div要通过margin-top/margin-bottom隔开一段距离时，隔开的距离不会是两者
margin-top和margin-bottom的像素值之和，而是两个像素之间的最大值，这就是margin合并。
可以通过上面的触发BFC来解决；但是在实际开发中，一般是如果两个div要上下相隔500px的话，就设置上面的div的margin-bottom:500px;来解决这个问题。