解決margin塌陷和margin合併
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>嘿嘿嘿</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
</head>
<style type="text/css">
body{
background: #f5f5f5;
}
.father-box{
width: 150px;
height: 150px;
background-color: black;
margin: 20px;
}
.father-box .son-box{
width: 50px;
height: 50px;
background-color: greenyellow;
margin: 20px;
}
.brother-two{
width: 150px;
height: 20px;
background-color: gold;
margin: 20px;
}
</style>
<body>
<div class="father-box brother">
<div class="son-box">
</div>
</div>
<div class="brother brother-two">
黃色的是20px的高度
</div>
</body>
</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（）
2、margin 塌陷
黑色 和 綠色 的margin-top都設為了20px，但是綠色並沒有距離黑色上邊20px。
margin 塌陷：普通文件流中父子塊級元素，如果父元素沒有設定上內邊距或上邊框，子元素的上邊距就會和父元素的上邊距重合，以他們兩個中間最大上邊距為準，與距離他們最近的盒子隔開。如:
如果我現在給綠色的盒 子設定margin-top:40px, 那麼黑色和綠色的盒子會一起向下移動20px。
解決方法：
將父元素的渲染規則改為BFC（）
這裡簡單的列舉一些觸發BFC的方法：
1、float:left/right;
2、position:absolute;
3、overflow:hidden;
4、display:inline-block;
brother-t