margin 重叠

转自： http://www.zhangxinxu.com/study/200908/margin-overlap.html

css margin重叠的问题

margin:20px;

margin:20px;

重叠：蓝色的上20边距与灰色背景div的20上边距重叠；蓝色方块的下20像素边距与红色方块的上20像素布局重叠；红色方块的20像素的下边距与灰色盒子的20像素下边距重叠。

由于IE浏览器和非IE浏览器两大阵营对处理margin重叠问题上有较大差异，所以解决margin重叠问题一般是没有什么兼容性的好方法的。一般而言，想这里同向重叠异向重叠的情况同时出现还是比较少见的。在实际项目中遇到重叠只是一部分的重叠。重叠有利有弊，关键是你要了解什么情况下会发生margin重叠，深刻理解它，这样当你不希望发生重叠的时候可以避免出现重叠，希望利用这种重叠属性的就利用它，正所谓，知己知彼，百战百胜。

下面提出了些margin重叠的解决方案，但是这些方案都是有缺陷了，在IE浏览器和非IE浏览器下的表现是不一致的。这里仅供参考，拓展思路和理解，您可以想想更加好的解决方法。我个人观点认为最好的解决margin重叠的方法就是认识它，避免它！

margin:20px; float:left;

margin:20px; clear:both;

单个方块重叠的解决方法：1.浮动。在IE浏览器下（IE8未测过），浮动可以解决margin-top以及margin-bottom重叠的问题。而在Firefox火狐浏览器或是chrome谷歌浏览器下以及opera浏览器下，浮动只能解决同方向上的margin重叠问题。不同方向上的margin重叠的问题依旧存在。

margin:20px; 父标签overflow:hidden; zoom:1;

margin:20px; 父标签overflow:hidden; zoom:1;

同方向margin重叠的解决方法：1.与清除浮动的方法一致，给外部的box添加清除浮动相同的样式即可。常用的样式代码为：overflow:hidden; zoom:1;但是有问题的是，在IE浏览器下（未测试IE8），应用zoom属性后，似乎发生了水平方向上margin失效的情况。其他表现均一致。

margin:20px; 父标签padding:1px;

margin:20px; 父标签padding:1px;

同方向margin重叠的解决方法：2.增加些边缘属性。例如padding值，padding:1px;或是border属性，border:1px solid #cacbcc。此方法在非IE浏览器下效果良好，但是在IE浏览器下，表现很糟糕。