經典CSS缺陷--margin塌陷問題和margin合併問題
阿新 • • 發佈：2019-01-06
margin塌陷問題
問題描述： 在文件流中，父元素的高度預設是被子元素撐開的 也就是說 子元素有多高，父元素就有多高 但是當子元素設定浮動之後，子元素會完全脫離文件流 此時將會導致子元素無法撐開父元素的高度，導致父元素高度塌陷程式碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin塌陷</title> <style type="text/css"> .parent{ border: 10px red solid; } .child{ background-color: yellow; width: 100px; height: 100px; float: left; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
網頁效果：下圖為元素脫離文件流的結果
當我們註釋掉浮動屬性的時候
我們可以得到想要的效果
如上圖所示，由於父元素高度塌陷，子元素想要通過margin-top向下移動，可是失敗了，即使我們除錯的時候通過在父元素新增border-top也無濟於事。如果margin-top超過一定限度就會帶著父級一起向下移動。
解決方案：
（一）頁面中元素都有一個隱藏的屬性--Block Formatting Content塊級格式化上下文（簡稱BFC） /* 我們這裡簡單說一下BFC 具有bfc的元素我們可以抽象的理解成為隔離了的獨立容器 那這個隱藏的屬性我們如何觸發（開啟）呢？ 方法： 滿足下面任一條件即可-
- display 為inline-blocks,table-cells,table-captions
所以只需要在父級元素上加一個overflow：hidden就可以，其他如上條件之一，如果情況合適均可。
（二）給父級元素新增一個邊框，就可以解決；如果不希望看到邊框，可以將邊框的顏色設成背景色即可。
margin合併問題
問題描述：
處於上下位置關係的兩個div容器，在通過margin-top、margin-bottom改變間距時，如果兩個屬性的值相同時，則兩容器間的距離就是這個值；如果兩個屬性的值不同，則取較大值作為兩容器間的距離；
如下圖所示，兩容器間距本來應該是上容器的margin-bottom值+下容器的margin-top值 但現實是兩容器間距等於margin-bottom和margin-top兩者中的最大值
這類bug不必解決，只需要調節最大值達到要求即可。
但也存在著解決方法，那就是在兩容器外都套上相同容器（class/id相同的），並在容器中設定overflow：hidden。
***************************************************************************************************************
文章結束~ 撒花✿✿ヽ(°▽°)ノ✿~