在BFC布局規則中提到內部Box垂直方向距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
總結出margin重疊三個條件
1、屬於同一個BFC
2、相鄰的Box
3、塊級元素
常見margin重疊的兩種方式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解決margin重疊</title> <style> *{ margin:0; padding: 0; } .up,.down{ width:200px; height: 200px; background: pink; margin:50px; } </style> </head> <body> <div class="up"></div> <div class="down"></div> </body> </html>
效果圖：
解決方法：在外層包一層div解決margin重疊，overflow:hidden開啟新的BFC，使其不屬於同一個BFC。
<body> <div class="up"></div> <div style="overflow: hidden;"> <div class="down"></div> </div> </body>
第二種常見方式：
子父margin兩種解決方法：
1、overflow：hidden開啟新的BFC
2、在外邊描一個1px的框，隔開不在同一個BFC
<style> *{ margin:0; padding:0; } .wrap{ width:300px; height: 300px; background: pink; /*overflow: hidden;*/ border:1px solid black; } .inner{ width:150px; height: 150px; background: green; margin:50px auto; } </style> </head> <body> <div class="wrap"> <div class="inner"> </div> </div>
效果如下：
