给子元素给了margin-top.父级元素也跟着掉下来了怎么办？

我们想实现这样的效果：

代码：

但是，很不幸，结果是这样的，父元素跟着子元素向下移动了20像素

外层的父元素跟着子元素莫名其妙下移了20像素

原理是什么呢？
嵌套的元素也共享Margin
一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

解决办法：
1、为父元素添加overflow：hidden；样式即可（完美）
2、内容生成(推荐)。代码如下：
element(父元素):before{
　　content:’’;
　　display:table;
}
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
6、父元素或子元素使用浮动或者绝对定位（浮动或绝对定位不参与margin的折叠）