一、什么叫盒子模型塌陷

•  当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。
• 例如这种情况：

<style>*{margin: 0;padding: 0;}.box{width: 100px;height: 100px;background-color: tomato;}#btn{margin-top: 20px;}
</style>
<div class="box"><div id="btn">容器</div>
</div>

二、解决盒子模型塌陷的方法：

1.给父容器设置上边线 

border-top: 1px solid transparent;

.box{width: 100px;height: 100px;background-color: tomato;border-top: 1px solid transparent;}

2.给父元素设置内边距

padding: 1px;

.box{width: 100px;height: 100px;background-color: tomato;padding: 1px;}

3.给父元素设置超出部分隐藏属性

overflow: hidden;

.box{width: 100px;height: 100px;background-color: tomato;overflow: hidden;}