解决盒子模型中的塌陷情况

我们在HTML中总会遇到各种情况，其中盒子塌陷就是一种常遇到的情况，解决这一问题有三种方法。
Q.问题的产生。
两个盒子呈嵌套关系，对子盒子设置 margin-top时父盒子会随着子盒子同时下移，并且 margin-top看不到效果。


解决方法如下：
1.给父盒子添加溢出隐藏：overfl：hidde；
代码如下：

效果图：

2.在父盒子中设置边框：border;

效果图：

3.在父盒子中设置内边距：padding-top；同时清除子盒子中的margin-top值；

效果图