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機制，因此問題就這樣被解決了。