1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>嘿嘿嘿</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover"> 8 9 </head> 10 <style type="text/css"> 11 body{ 12 background: #f5f5f5; 13 } 14 .father-box{ 15 width: 150px; 16 height: 150px; 17 background-color: black; 18 margin: 20px; 19 } 20 .father-box .son-box{ 21 width: 50px; 22 height: 50px; 23 background-color: greenyellow; 24 margin: 20px; 25 } 26 .brother-two{ 27 width: 150px; 28 height: 20px; 29 background-color: gold; 30 margin: 20px; 31 } 32 </style> 33 <body> 34 <div class="father-box brother"> 35 <div class="son-box"> 36 37 </div> 38 </div> 39 <div class="brother brother-two"> 40 黃色的是20px的高度 41 </div> 42 43 </body> 44 45 </html>
結果為：
上面執行的代碼可以看到兩個經典的cssbug:
father-box ：黑色盒子；son-box：綠色盒子；brother-two：黃色盒子
1、margin合並
黑色 和 黃色的盒子 都設置了 margin:20px， 按理說黑色和黃色的垂直間距是40px, 但是事實是20px, 這就是margin合並造成的。
margin合並：普通文檔流中塊級元素的垂直外邊距會互相合並，也就是會以他們之間外邊距大的為准，比如：
我如果現在將黃色的盒子的margin-top設為10px;黃色和黑色之間的間距不會改變，依舊是20px;但是如果設為30px,那么黃色和黑色之間的間距就會以較大的30px為准，變為30px;
解決方法：
推薦也是常用的：如果要上下間距為40px,只需要黃色的盒子上邊距設為40px,黑色的盒子不用設下邊距，這樣就可以了，意思是不需要強行解決這個bug,只需要將一邊的邊距設為兩個盒子邊距的和就可以了
不推薦也是不常用的（這樣會改變html結構）：在黃色和黑色的盒子外面在加一個盒子，讓這個加的外層盒子的渲染規則改為BFC（https://www.cnblogs.com/xingyue525/p/10924882.html）
2、margin 塌陷
黑色 和 綠色 的margin-top都設為了20px，但是綠色並沒有距離黑色上邊20px。
margin 塌陷：普通文檔流中父子塊級元素，如果父元素沒有設置上內邊距或上邊框，子元素的上邊距就會和父元素的上邊距重合，以他們兩個中間最大上邊距為准，與距離他們最近的盒子隔開。如:
如果我現在給綠色的盒 子設置margin-top:40px, 那么黑色和綠色的盒子會一起向下移動20px。
解決方法：
將父元素的渲染規則改為BFC（https://www.cnblogs.com/xingyue525/p/10924882.html）
這里簡單的列舉一些觸發BFC的方法：
1、float:left/right;
2、position:absolute;
3、overflow:hidden;
4、display:inline-block;