3.1.1 在两个盒子嵌套时，内部的盒子设置的margin-top会加到外部的盒子上，导致内部盒子的margin-top设置失败，解决方法如下：
1.外部盒子设置一个边框
2.外部盒子设置一个overfow:hidden
3.使用伪元素类
<html lang="en"> <head> <meta charset="UTF-8"> <title>margin-top塌陷</title> <style> .clearfix:before{ content: ""; display: table; } .con{ width: 300px; height: 300px; background-color: gold; /*border: 1px solid #000;方法1：加一个边框*/ /*overflow: hidden;方法2：使用overflow*/ /*方法3：使用伪元素*/ } .box{ width: 200px; height: 100px; background-color: green; margin:100px auto; } </style> </head> <body> <div class="con clearfix"> <div class="box"></div> </div> </body> </html>
3.1.2 示意图
\1.png)