CSS - 子元素外边距溢出

在给没有margin-top-border父元素中的子元素添加margin-top时，发现没有直接表现出来，而是作用到父元素身上，就会导致子元素的margin-top溢出。

解决方法：内容生成，before（推荐）

html:

<div id="container">
    <div id="item"></div>
</div>

css:

#item {
  width:200px;
  height:200px;
  background:pink;
  /*子元素的上外边距作用到父元素*/
  margin-top:20px;
}
#container:before {
  content:"";
  display:table;
}