css中给子元素添加margin-top影响到父元素

给ul下的子元素li添加margin-top后，这个margin-top的值会影响到父元素，比如我给li的margin-top值设置为20px，这时候父元素会向下偏移20px。这个问题产生的原因是css2.1盒模型的规定所导致，css2.1规定：如果两个相邻的盒元素第一个如果设置margin-bottom为20px，第二个设置为margin-top为10px，最终的显示是会合并成一个且值大的会覆盖值小的.

.first{
      width: 300px;
      height: 300px;
      margin-bottom: 20px;
      background-color: pink;
    }
    .second{
      width: 300px;
      height: 300px;
      margin-top: 10px;
      background-color: blue;
    }

<div class="first"></div>
  <div class="second"></div>

如果两个盒子是嵌套关系，即父级关系，给父元素添加margin:0 auto;给子元素添加margin-top为20px，理想中是父元素居中子元素相对父元素向下偏移20px，但是现实是父元素向下偏移了20px；原因是当两个盒模型是嵌套关系时，会共享margin，所以父元素会向下偏移20px；

解决方案：
1.给父元素添加border
2.给父元素添加padding值
3.给父元素添加overflow:hidden;
4.给子元素添加float