子元素和父元素的margin重合正确来说应该是叫margin共享
什么是margin共享？ 其实就是子元素的margin-top会传递给父元素。
具体来举个例子
<style>
#f{
width:200px;
height:200px;
background-color: red;
}
#c{
background-color: blue;
width: 100%;
height:30px;
margin-top:20px;
}
</style>
<body>
<div id="f">
<div id="c"></div>
</div>
</body>
诸位认为这段代码会是什么样子呢，是这样吗?
事实上，在浏览器中，他是这样的
可能一下子看不清，我讲一下，第一张图id为f的div，紧紧贴在浏览器最顶端。id为c的子元素div 在#f的div里面，并且距离顶端20px的距离。
这也正是我们想要的效果。
但是，事实上在浏览器里面是呈现出的是第二张图的效果，也就是说。 子元素#c紧紧贴在父元素#f的最上方，而父元素#f和浏览器上端有20px的距离
本来是想要子元素在父元素里面有20px的顶部距离，结果父元素子元素一起移动了。于是我们看到的是在父元素上面游客20px的top距离。
导致出现这个情况的原因就是子元素的margin-top会传递给父元素。然后由父元素实现了样式 margin-top:20px; 也就是所谓的margin共享。
我们可以看看css2.1中的盒子模型定义，
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。 毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
根据定义我们可以知道了
同级的兄弟元素 和 嵌套的父子元素的父元素 在没有非空内容、Padding或Border分割的情况下就会出现这个情况。（什么情况？margin共享哦）
解决嵌套的父子元素margin共享办法
- 父级或子元素使用浮动或者绝对定位absolute（浮动或绝对定位不参与margin的折叠）
- 父级overflow:hidden;
- 父级设置padding（破坏非空白的折叠条件）
- 父级设置border（破坏非空白的折叠条件）
解决同级兄弟元素margin共享办法
还是别解决的好，滑稽，怎么解决下次再说
2018 12 14更新------------------------------------------------------------------------------------------------------------------------------------------------
讲一下兄弟与元素的margin共享用处
共享后两个元素的间距就是其中margin最大的那个元素的间距，这样可以用来做竖着的排列。会很规整。
解决办法：
1.下边的元素让他浮动 float:(left或者right);
2.下边的元素让他 dispaly:inline-block;
这些方法好像都被统称为BFC，下次讲讲BFC
3402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
