css经典bug：margin垂直方向塌陷。多种解决方式

先看代码，上效果图：

.parent {
    margin-top: 200px;
    
    width: 200px;
    height: 200px;
    background: red;
  }

  .child {
    margin-top: 50px;
    
    width: 100px;
    height: 100px;
    background: black;
  }
复制代码

margin在垂直方向上的使用有上下排列，跟内嵌两种情况，上面属于内嵌。 parant的margintop=200px,正常效果，但是child的margintop=50px却没有给到我们预期的效果，这是为什么呢？

可以理解为这是css的bug！不用纠结为什么，只知道怎么解决就可以了。下面总结了解决这种margin垂直方向塌陷的几种方式：

• border，给parent加上border，就是说child有了顶部的参考了，所以他的margintop就起效
• overflow: hidder
• position:absoulate
• float: left/right
• display:inline-block 除了border的方式外的（overflow、position、float、display） 这几种方式为什么能够解决这个问题呢？这时候就该说到BFC(block fotmat context)了，这东东我的理解就是合模型的一种绘制方式，他与原本的绘制方式只有微乎其微的不同点，但恰恰就是那么一点不同刚好就能解决了塌陷的问题，所以我们只要触发BFC这种机制就好了；而上面说的
  overflow: hidder position:absoulate float: left/right display:inline-block 这些属性能够触发出BFC机制，所以问题就这样被解决了。

转载于:https://juejin.im/post/5c9dd9966fb9a05e617b1f9b