問題描述：原型大概是“一個div嵌套了兩個 div,給main設定了background="pink" ,header1設定background=“red” 。header2 設定background=“blue” ,同時給heder1 設定margin-top:10px; 預想的是內層 heder1div 的上邊距 maindiv 上邊有10px的距離 但事實上 出現一個問題 ，內層div 並沒有出現他所預想的那種效果，實際效果是 maindiv 仍然緊貼內層div 整個maindiv 上邊框距離瀏覽器上邊 增加了10px 的外邊距”
問題描述代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} .main{ width: 400px; height: 400px; background: pink; } .header1{ width: 150px; height: 150px; background-color: red;
margin-top:10px; } .header2{ width: 150px; height: 150px; background-color: blue; } </style> </head> <body> <div class="main"> <div class="header1"> </div> <div class="header2"> </div> </div> </body> </html>
解決方案：
1、在父級加入overflow：hidden；
2、在父級用padding-top
3、在父級加position：absolute；
在常規文檔流中，2個或以上的塊級盒模型相鄰的垂直margin會被折疊。最終的margin值計算方法如下：
a、全部都為正值，取最大者；
b、不全是正值，則都取絕對值，然后用正值減去最大值；
c、沒有正值，則都取絕對值，然后用0減去最大值。
注意：相鄰的盒模型可能由DOM元素動態產生並沒有相鄰或繼承關系。