CSSmargin擊穿問題（子元素margin-top會影響父元素）

最近寫一個H5頁面的時候發現了這個被忽視的問題，一時沒想到什么原因，搜了半天，記錄一下，方便他人踩坑。唉，有些東西不用就忘。

一、問題描述

<div class="container">
    <div class="children">子元素</div>
</div>

.container {
  background-color: rgb(226, 43, 89);
}
.children {
  background-color: rgb(228, 131, 12);
  margin-top: 20px;
}

最終效果：會發現在元素上面會有20px的空白，然而我們並沒有對父元素設置margin，可見是子元素的 margin-top：20px 影響到了父元素。

 二、原因：MDN的文檔：如果沒有邊框border，內邊距padding，行內內容，也沒有創建塊級格式上下文或清除浮動來分開一個塊級元素的上邊界margin-top 與其內一個或多個后代塊級元素的上邊界margin-top；或沒有邊框，內邊距，行內內容，高度height，最小高度min-height或 最大高度max-height 來分開一個塊級元素的下邊界margin-bottom與其內的一個或多個后代后代塊元素的下邊界margin-bottom，則就會出現父塊元素和其內后代塊元素外邊界重疊，重疊部分最終會溢出到父級塊元素外面。

三、簡單的解決方案：

1、父元素加border。emmm，這樣會多加border的寬度。

2、父元素overflow：auto。（比較喜歡這種。）

3、設置父元素的display為flex或inline-block。

4、使用絕對定位。

5、願意的話可以在父元素子元素之間再加一個div咯。