margin上外边距溢出问题

问题：当为div 的第一个子元素设置margin-top时,会作用到父元素身上。
解决：
1：为父元素设置上边距。border-top:1px solid #ddd;(弊端：父元素高度变化。不提倡)
2：为父元素设置内边距取代外边距。（弊端：父元素高度改变。不提倡）
3：在子元素div前增加空的<table><table/>元素，(提倡)
4：通过伪类选择器动态创建table：

  <style>
    .farther{
      width:200px;
      height:200px;
      background: blue;
    }
    .child{
      width: 100px;
      height:100px;
      background: pink;
      margin-top:50px;
    }
    .farther::before{
    //在父元素的第一个子元素创建table.。
      content: "";
      display: table;
    }
  </style>

  <div class="farther">
    <div class="child"></div>
  </div>