CSS解决盒模型塌陷的三种方法

相信大家都遇到过这种情况,先定义了一个父div和一个子div

<div class="father">        
<div class="son"></div>    
</div>

之后给了一些样式后

然后给子盒子margin-top:50px后,就变成了这样

这种状况就叫做盒模型塌陷

下面给出三种解决方法
1.给父元素添加上边框

.father {
width:200px;
height:200px;
border:5px solid black;
background-color:pink;
}

2.给父元素添加内边距

.father {
width:200px;
height:200px;
padding:10px;
background-color:pink;
}

3.给父元素添加overflow:hidden;属性

.father {
overflow:hidden;
width:200px;
height:200px;
background-color:pink;
}