1 <!DOCTYPE html> 2 <html lang="en"> 3 <!-- top塌陷（只有top会塌陷，left等不会）：在两个盒子嵌套的时候，内部盒子设置的margin-top会加到外部的盒子，导致内部盒子的margin-top设置失败，解决方法如下： 4 1、外部盒子设置一个边框 5 2、外部盒子设置overflow：hidden 6 3、使用伪元素类：一般用这个，clearfix名字是约定俗成的 7 .clearfix:before{ 8 content:''; 9 display:table; 10 } --> 11 <head> 12 <meta charset="UTF-8"> 13 <title>Document</title> 14 <style type="text/css"> 15 .box1{ 16 width: 300px; 17 height: 300px; 18 background-color: gold; 19 /*border: 1px solid #000;*/ /* 第一种方法 */ 20 /*overflow: hidden;*/ /* 第二种方法 */ 21 } 22 23 .box2{ 24 width: 200px; 25 height: 100px; 26 background-color: green; 27 margin-top: 100px; /* 此时用margin-top会把父级盒子一起撑下去 */ 28 } 29 30 .clearfix:before{ 31 content:""; 32 display: table; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="box1 clearfix"> 38 <div class="box2" class="clearfix"></div> 39 </div> 40 </body> 41 </html>