在两个盒子嵌套时，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：
（1）外部盒子设置一个边框
（2）外部盒子设置overflow:hidden
（3）使用伪元素类：
.clearfix:before{
content:””;
display:table;
}
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin-top塌陷</title> <style type="text/css"> .clearfix:before{ content:""; display:table; } /* 第三种解决塌陷的方法，相当于第一种加了边框 第三种方法是最常用的方法 */ .con{ width: 300px; height: 300px; background-color: gold; /*border:1px solid black; /* 第一种解决塌陷的方法 */ /*overflow:hidden; /* 第二种解决塌陷的方法 *!*/ } .box{ width: 200px; height: 100px; background-color: green; margin-top: 100px; } </style> </head> <body> <div class="con clearfix"> <div class="box"></div> </div> </body> </html>
页面显示效果：