問題：子盒子設置上外邊距，父盒子會隨着子盒子塌陷，嵌套塊元素垂直外邊距合並
<style>
*{
padding: 0;
margin: 0;
}
.father {
height: 500px;
width: 500px;
background: rgb(184, 184, 167);
}
.son {
width: 200px;
height: 200px;
background: rgb(199, 20, 20);
margin-top: 100px;
}
</style>
<body>
<div class="father">
<div class="son">子盒子設置上外邊距，父盒子會隨着子盒子塌陷，嵌套塊元素垂直外邊距合並</div>
</div>
</body>
如下圖所示，是希望出現的效果，然而實際情況是父盒子會隨着子盒子一起下來
三個解決辦法：
/* 解決辦法 1：為父盒子設置1像素的上邊框,顏色一樣，但是會撐大父盒子，所以父盒子高度減1*/ .father { border-top: 1px solid rgb(184, 184, 167); height: 499px; }
/* 解決方法 2：為子盒子設置1像素的上內邊距，也會撐大子盒子，所以子盒子高度減1 */ .son { padding-top: 1px; height: 199px; }
/* 解決方法 3：父盒子設置overflow：hidden ，觸發bfc ,不會撐大盒子*/ .father { overflow: hidden; }