1. 父元素 margin 塌陷
   只發生在垂直方向，父元素的第一個或最後一個子元素設定了同方向的 margin 值，兩個屬性之間沒有其他內容進行隔離，導致父元素margin-top或margin-bottom塌陷；
   當父子元素margin-top均為0px,效果如左圖；當橙色父元素margin-top: 20px, 綠色子元素margin-top: 50px, 效果如右圖；當父元素的上邊距大於子元素的上邊距時，子元素會帶著父元素一起掉下來。
   效果圖：
   

常見解決方法：

• 給父級元素設定邊框或內邊距
• 觸發BFC佈局，改變父級元素渲染規則，將父級元素獨立，可給父級盒子新增：position：absolute/fixed、display：inline-block、float：left/right、overflow：hidden等一些觸發BFC的屬性，但是使用的時候都會帶來不同的問題，具體使用中還需根據具體情況選擇
• 給子元素前面新增一個空的兄弟元素，其overflow設為hidden，起隔離作用

2. 同級元素 margin重疊
   只發生在垂直方向，在同一個BFC區域內，相鄰的兄弟元素會出現margin重疊情況，通常是上一個盒子的margin-bottom和下一個盒子的margin-top，疊加後的間距通常是：兩者為正取大值（如下圖所示效果），一正一負/兩者為負取兩者之和
   
   常見解決辦法：
   觸發BFC佈局，改變元素渲染規則，將其中一個元素獨立出來；