塌陷问题
当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。
①垂直并列
首先设置两个DIV,并为其制定宽高
1 /*HTML部分*/
2 <body>
3 <div class="box1">box1</div>
4 <div class="box2">box2</div>
5 </body>
6 /*CSS部分*/
7 <style>
8 *{
9 margin: 0;
10 padding: 0;
11 }
12 .box1{
13 width: 200px;
14 height: 200px;
15 background: yellowgreen;
16 }
17 .box2{
18 width: 200px;
19 height: 200px; background: gray;
20 }
21 </style>
对box1我们为其设置margin-bottom：50px;
对box2我们为其设置margin-top： 40px;
1 <style>
2 *{
3 margin:0;
4 padding:0;
5 }
6 .box1{
7 width:200px;
8 height:200px;
9 background: yellowgreen;
10 margin-bottom: 50px;
11 }
12 .box2{
13 width:200px;
14 height:200px;
15 background: gray;
16 margin-top: 40px;
17 }
18 </style>
我们肯定会很理所当然的认定这两个盒子之间的距离为90px，事实上并非如此.
如下图所示：
两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。
②嵌套关系(父级元素塌陷)
1 /*CSS部分*/
2 <style>
3 .box1{
4 width:400px;
5 height:400px;
6 background: pink;
7 }
8 .box2{
9 width:200px;
10 height:200px;
11 background: lightblue;
12 }
13 </style>
14 /*HTML部分*/
15 <body>
16 <divclass="box1">
17 <divclass="box2"></div>
18 </div>
19 </body>
如图示
当为子盒子添加margin-top：10px;时会发生如下情况：
子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙（即父级盒子往下塌陷了10px）。
解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值；
（4）为父盒子添加position：fixed；
（5）为父盒子添加 display：table；
（6）利用伪元素给子元素的前面添加一个空元素
.son:before{ content:"";
overflow:hidden; }