在最近的开发中，经常会遇到一个问题，就是子div设置的margin-top对整个父div的位置造成了影响，这给整个的布局带来了很大的困扰。
当给子元素的class属性增加:margin-top:50px时，尽管没有给外层的div设置margin-top，但是还是距离浏览器最顶部产生了50px的间距。但是在查看外层div时，会发现外层div的margin依然是0 auto; 所以这个margin还是属于h2，为什么会这样？
css2.1盒模型中规定：所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
根据定义，因为父div模块和子div模块之间没有非空内容、padding或者是border分割，所以此时这两个盒元素的margin合并共享之，子div的margin-top直接作用于合并的margin，将整个父div模块和子div模块下拉。因为两者同时下移，所以子div相对于父div的位置并未发生改变。
解决办法：
-
父级或子元素使用浮动或者绝对定位absolute（浮动或绝对定位不参与margin的折叠）
-
父级overflow:hidden;
-
父级设置padding（破坏非空白的折叠条件）
-
父级设置borde
摘自：CSDN
