盒子的margin塌陷问题解决方案（嵌套盒子出现margin无效）

1.上边距取最大值~~

发生在两个盒子嵌套的时候，父盒子和子盒子同时设置margin的时候会出现实际的magin取的是两个margin的最大值

eg:

html:

 

 <div class="father">
   <div class="son">

   </div>
 </div>

css:

 

 

.father{
  background-color: red;
  height: 200px;
  margin-top: 50px;
}
  .son{
    background-color: green;
    height: 100px;
    margin-top: 150px;
  }

效果：

 

如图所示：可以看出margin-top取了最大的150px,如果不明显可以对比以下：

html同上；

css:

 

.father{
  background-color: red;
  height: 200px;
  margin-top: 50px;
}
  .son{
    background-color: green;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 50px;
  }

效果：
此次设置的是父元素较大同样是50px.子元素就10px,最后margin-top取的是较大的50px

 

2.margin塌陷。

在父子盒子嵌套的时候会出现子元素设置子元素margin的时候失效。

eg

html还是如1.0

css:

 

.father{
  background-color: red;
  height: 200px;
}
  .son{
    background-color: green;
    width: 200px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

效果：

 

可见，此时绿色的小的子元素设置的margin均失效

2.1解决方式：

  1.给父元素一个边框border

如果你要边框就给个边框，不需要边框就给一个透明色的边框

css:

 

.father{
  background-color: red;
  height: 200px;
  border: 1px solid #fff
}
  .son{
    background-color: green;
    width: 200px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
  }  border: 1px solid #fff
}
  .son{
    background-color: green;
    width: 200px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

效果：

 

效果：margin有效

2.给父元素增加overflow:hidden

css:

 

.father{
  background-color: red;
  height: 200px;
  //border: 1px solid #fff;
  overflow:hidden;

}
  .son{
    background-color: green;
    width: 200px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

效果如上：不再赘述

 

3.给父元素设置display：fixed;

css:

 

.father{
  background-color: red;
  height: 200px;
  //border: 1px solid #fff;
  //overflow:hidden;
  position: fixed;

}
  .son{
    background-color: green;
    width: 200px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
  }  position: fixed;

}
  .son{
    background-color: green;
    width: 200px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

效果一致

 

4.给父元素添加display:table;

css:

 

.father{
  background-color: red;
  height: 200px;
  //border: 1px solid #fff;
  //overflow:hidden;
  //position: fixed;
  display: table;

}
  .son{
    background-color: green;
    width: 200px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
  }  display: table;

}
  .son{
    background-color: green;
    width: 200px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

效果如上：

 

5.

.给子元素的前面添加一个兄弟元素

               属性为:content:"";

                  overflow:hidden;

css:

.father{
     background-color: red;
     height: 200px;
     //border: 1px solid #fff;
     //overflow:hidden;
     //position: fixed;
     //display: table;

   }
  .son::before{
    content: '';
    overflow: hidden;
  }
  .son{
    background-color: green;
    width: 200px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
  } .son::before{
    content: '';
    overflow: hidden;
  }
  .son{
    background-color: green;
    width: 200px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

以上推荐使用1.2.5三种方法；

具体发生margin塌陷的原因个人理解是由于margin值需要根据参照点来实现偏移的，当没有参照点是就出现了无法偏移的情况，所以需要手动给父元素设置一个点出来做子元素的偏移参照物