margin合併與塌陷BUG及解法
其實css也不是極其完善的，其中也存在著或多或少的bug，有些我們可能從來不會遇到，有些我們可能會經常遇到，這次介紹的兩個bug是屬於cssbug中的很經典的兩個bug——margin合併與margin塌陷問題。
margin合併現象
• 我們現在寫兩個span標籤，並且給它們兩個分別加上margin-right和margin-left的樣式。
<span class=”left”>left</span>
<span class=”right”>right</span>
CSS; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
我們會發現，這兩個span之間的距離正是我們所想的那樣是20px的寬度，但是我們現在再寫兩個div，然後分別給它們加上margin-bottom和margin-top的樣式，我們再來看看效果。
<div class=”top”>top</div>
<div class=”bottom”>bottom</div>
CSS; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
這次我們驚奇的發現，這兩個div上下之間的距離，並不是我們所想的那樣是相加的20px，而是隻有10px！
這個現象就是標題所說的margin上下合併現象
我們嘗試改變每一個div的margin-top或者margin-bottom的值，最後發現：二者上下之間的距離是取得兩個數值之中的最大值。
如果div.top的margin-bottom是100px，div.bottom的margin-top是50px的話，那麼二者之間的距離就是100px。
margin塌陷現象
• 當我們給這樣一個結構的兩個div分別設定margin-top的時候，這個bug就會出現了。
<div class=”wrapper”>
<div class=”content”></div>
</div>
CSS; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
我們寫這段程式碼的原意是想要一個100100大小的父級div，然後裡面有一個5050大小的子級div，然後讓這個div在父級div的右下角，同時父級div距離瀏覽器的邊框有100px的距離。
當我們執行這段程式碼的時候，我們會發現，實際的結果是這個樣子的：
子級div的margin-left生效了但是好像margin-top並沒有生效？
其實並不是，margin-top也生效了，但是這裡的margin-top的效果並不是我們所想的那樣距離父級div的距離是50px，而是子級的div距離瀏覽器邊框的距離是50px，由於本身父級div有一個margin-top的值，所以就導致了我們子級的margin-top的效果並沒有顯現出來，我們再改變一下子級div的margin-top的值，改成200px，我們又會驚奇的發現，子級div不僅沒有距離父級div有了一段距離，反而帶動了父級div一起向下移動了！這就是margin塌陷現象。
那麼對於這兩個問題我們要怎麼解決呢？
margin塌陷的解法
解法一共有兩種：
1.利用border來觸發bfc的效果。
2.利用overflow屬性來觸發bfc的效果。
• 那麼什麼是bfc呢？
bfc全稱是block format context——塊級格式化上下文，我們有一些css語法會觸發bfc，從而帶來的效果是我們觸發bfc的元素的渲染規則和普通元素的渲染規則變得不一樣，從而可以解決塌陷問題。
margin塌陷的問題很容易讓我們聯想到，子級div之所以沒有相對父級移動，是因為它看不到父級的邊界，只能看到瀏覽器的邊界，這樣我們給父級加一個子級能看到的邊界，這個問題是不是就解決了？
所以我們在父級div.wrapper裡面新增一個屬性：border-top: 1px solid red;現在我們再來看一下效果，發現果然content和wrapper解除了繫結，子級div能看到父級的邊界了。但是這樣就會改變父級div的樣式，不符合開發要求，因此這種方法雖然可以解決問題但是是完全無法使用的。
• 什麼又是overflow呢？
overflow是一個css屬性，它可以設定當內容區超過了當前元素的區域的時候，我們採取怎樣的處理方式，這個屬性也可以觸發bfc。
現在我們可以在父級div.wrapper裡面加一條屬性：overflow:hidden;這條屬性的意思是溢位隱藏。現在我們可以發現，在外觀沒有改變的同時，子級div和父級div解除了繫結，也可能正常移動了！因此我們一般採用這種方式來解決margin塌陷的問題。
雖然overflow:hidden;的方式可以採用，但是也不是沒有缺點的，一旦我們用過js程式碼改變了子級div的位置，就會有導致子級一部分內容因為溢位被隱藏的風險。
margin合併的解法
瞭解了margin塌陷的解法之後，我們就很容易可以理解margin合併的解法了。
我們給每一個div分別加上一個父級包裹層，然後給父級包裹層都加上overflow:hidden;
<div class=”wrapper”>
<div class=”top”>top</div>
</div>
<div class=”wrapper”>
<div class=”bottom”>bottom</div>
</div>
CSS; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
這樣通過父級div來觸發bfc就可以解決margin合併的問題了。
那麼今天的東西就這麼多，希望對大家有所幫助喲~