聽說剛開始人們覺得margin 塌陷是個bug，后來漸漸地才發現，原來所有的瀏覽器都這樣，所以就不算bug
要強調是的外邊距的塌陷問題只會在垂直之間產生塌陷；水平之間不受影響的；
還有就是兩個盒子的垂直外邊距完全接觸才會觸發。
看下面做兩個div，指定寬高：
對上面的進行margin-bottom：30px；
再對下面的盒子進行margin-top：10px后：
從標尺上可見他們之間的間隙僅僅多了30px；原因是垂直之間塌陷的原則是以兩方最大的外邊距為准，這里30為最大的一方，故外邊距只是30px；
但是在一般情況下，垂直兩個盒子出現這種情況下，比較少（並列）形式出現，因為沒什么必要，直接針對一個來外邊距就好，何苦上面給一點，下面給一點外邊距。
出現情況比較多的是，嵌套關系的盒子。急需要我們去解決。
如圖：
對里面的盒子進行margin-top:10px;后會出現這樣狀況：
可見外層div塌陷；
ok，如何解決呢？有兩種方法，當然，看到有人用那里頭的div進行padding空出位置，這里我們換方式，保持原代碼基礎上做動作。
解決方法：
1. 給大盒子（外層）指定一個邊框。可以解決 （因為外層有border的話，他們兩顯然就不是緊貼在一起的了），如果不希望看到邊框，可以改成背景色（我實驗的背景色是白色）。
|
1
|
.waichen{border：
1px
solid
#fff
;}
|
2. 大盒子加溢出css：
|
1
|
overflow
:
hidden
;
|
這樣的話，完美解決。
