當塊級元素（block）的上外邊距(margin-top)和下外邊距(margin-bottom)同時都有設定時只會只會保留最大邊距，這種行為稱為邊界折疊（margin collapsing），有時也翻譯為外邊距重疊。、
設定float和position=absolute（包括固定定位fixed，但是relative不可以）的元素不會產生外邊距重疊行為（也就是父子元素都是標准流的時候會發生外邊距塌陷的問題）
只要父元素和子元素任何一個元素設置了浮動或者絕對定位就不會發生外邊距塌陷的問題
例如：給定一個父盒子和一個子盒子
<div class="father"> <div class="son"></div> </div>
.father { width: 300px; height: 200px; background-color: black; } .son { width: 200px; height: 150px; background-color: purple; margin-top: 50px; }
只給子盒子一個上外邊距，會發現父盒子跟隨子盒子一起有了一個上外邊距，這就是外邊距塌陷
有三種情況會形成外邊距重疊：
一、同一層相鄰元素之間
相鄰的兩個元素之間的外邊距重疊，除非后一個元素加上clear-fix清除浮動。
但是在一般情況下，垂直兩個盒子出現這種情況下，比較少（並列）形式出現，因為沒什么必要，直接針對一個來外邊距就好，何苦上面給一點，下面給一點外邊距。
二、父元素和子元素之間
如果沒有邊框border，內邊距padding，行內內容，也沒有創建塊級格式上下文或清除浮動來分開一個塊級元素的上邊界margin-top 與其內一個或多個后代塊級元素的上邊界margin-top；或沒有邊框，內邊距，行內內容，高度height，最小高度min-height或 最大高度max-height 來分開一個塊級元素的下邊界margin-bottom與其內的一個或多個后代后代塊元素的下邊界margin-bottom，則就會出現父塊元素和其內后代塊元素外邊界重疊，重疊部分最終會溢出到父級塊元素外面。
解決方案：
- 如果div中有內容，可以自行撐開，不會發生融合
- 父元素設置了padding、border，不會發生合並
- 父元素或者子元素設置了float或者position：absolute，不會發送融合（可以理解為BFC會阻止元素外邊距合並。）
三、空的塊級元素
當一個塊元素上邊界margin-top 直接貼到元素下邊界margin-bottom時也會發生邊界折疊。這種情況會發生在一個塊元素完全沒有設定邊框border、內邊距paddng、高度height、最小高度min-height 、最大高度max-height 、內容設定為inline或是加上clear-fix的時候。
參考鏈接：https://blog.csdn.net/qq_24189933/article/details/79278706