margin塌陷

一：什么是margin塌陷

在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者padding
margin直接接触，就产生了合并
表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象

二：margin塌陷的分类

1、兄弟关系的盒子
2、父子关系的盒子

兄弟并列

 1 <style>
 2 *{
 3     margin:0;
 4     padding:0;
 5 }
 6 .box1{
 7     200px;
 8     height:200px;
 9     background: yellowgreen;
10     margin-bottom: 50px;
11 }
12 .box2{
13     200px;
14     height:200px;
15     background: gray;
16     margin-top: 40px;
17 }
18 </style>

对box1我们为其设置margin-bottom：50px;

对box2我们为其设置margin-top： 40px;

如下图所示：

两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。

父子关系

 1 /*CSS部分*/
 2 <style>
 3 .box1{
 4     400px;
 5     height:400px;
 6     background: pink;
 7 }
 8 .box2{
 9     200px;
10     height:200px;
11     background: lightblue;
　　　　margin-top：10px
12 }
13 </style>
14 /*HTML部分*/
15 <body>
16     <divclass="box1">
17     <divclass="box2"></div>
18 </div>
19 </body>

当为子盒子添加margin-top：10px;时会发生如下情况：

子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙。

解决方法：

1.给父元素增加边框

为了不影响原先的图像效果，可以将边框颜色设置为白色（与浏览器背景颜色一致）。

2.溢出隐藏

在父元素的style里面添加overflow：hidden；

3.利用浮动

给父元素的style添加浮动，但是这种方法不推荐使用。因为会带来未知的错误。

4.给父元素添加position:fixed;

这里用到了定位的知识，将父元素显示在固定位置，就不会受margin-top塌陷的问题影。

5.使用伪元素

1 .clearfix::before{ 
2 content: ”“”; 
3 display: table; 
4 }