为什么子元素的margin会影响到父元素

有时候决定自己会很多东西，没想到被一个很简单的问题搞的不知所措：

子元素的margin似乎作用到了父元素上面去。为什么？

这是一个bug--父元素的上方与子元素的上方完全重合在了一起，无法分开
摘自深入理解css中的margin属性 - wjbooks - 博客园https://www.cnblogs.com/whwywzhj/p/6127519.html

解决办法：

我没搞懂原理，单单几下解决办法：

方法一：给父元素添加padding-top值
方法二：给父元素添加border值
方法三：给父元素添加属性overflow:hidden;
方法四：给父元素或者子元素声明浮动float
方法五：使父元素或子元素声明为绝对定位：position:absolute;
方法六：给父元素添加属性 overflow:auto; positon:relative；（注：此方法为后续添加，感谢博友@小精灵Pawn提供此方法）

摘自深入理解css中的margin属性 - wjbooks - 博客园https://www.cnblogs.com/whwywzhj/p/6127519.html

原因：

经过了和同学讨论，找到了这个bug的原因：