第二十四节 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>
标签：color,top,100px,height,width,第二十四,margin 来源： https://www.cnblogs.com/kogmaw/p/12420658.html