第二十四节 margin的top塌陷

 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>