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知道：子級元素.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;來解決這個問題。