margin塌陷问题

1.同级盒子margin塌陷

方法一： 这一种塌陷处理方式：

期望两个盒子的上下间距为200px
1、 当设置两个盒子的margin-bottom: 100px; margin-top: 100px;由于塌陷会造成两个盒子的上下间距
仅为100px。 如果不想处理可以直接设置两个盒子的margin-bottom: 200px; margin-top: 200px;
(注意：如果margin-bottom: 50px; margin-top: 100px;实际的间距其实是100px)
2、或者直接就只设置一个盒子的margin-top或者margin-bottom为200px。

方法2： 这一种塌陷处理方式：

期望两个盒子的上下间距为100px：
在两个同级子元素外同时再套一个盒子parent，形成BFC即可

2.嵌套盒子margin塌陷

  1、父盒子没有设置高度时，自身的高度会被子盒子撑起来，此时遇到塌陷问题，
  可以考虑使父盒子脱离文档了（BFC），目的是将盒子的脱离于当前文档流，
  塌陷自然被解决。方法就是设置BFC的几种手段。
  2、也可以给父盒子设置padding或border

1.BFC设置

  1、浮动元素，float 除 none 以外的值； 
  2、绝对定位元素，position（absolute，fixed）；
  3、display 为以下其中之一的值 inline-block，table-cell，table-caption、flex；
  4、overflow 除了 visible 以外的值（hidden，auto，scroll）；