学习碰到的问题——margin重叠现象

今天老师要求做个这样的盒模型，如图。
感觉挺简单的，然后各自给大盒子和小盒子各设置了margin-top：50px；。但是发现一打开小盒子根本和大盒子拉不开距离。然后不停的放大和缩小小盒子的margin-top，发现变化的只是大盒子的上边距。最后通过百度才知道这是margin的重叠现象。看了很多大神的总结，现在自我做一个记录，方便以后学习。

重叠的情况大致可以分为以下几种：

1、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

2、当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），第一个子元素的上边距会和父元素的上边距合并；最后一个子元素的下边距会和父元素的下边距合并。ps：也就是我今天碰到的类型。

3、假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。如果这个外边距遇到另一个元素的外边距，它还会发生合并。

当发生重叠的时候：

1、当两个margin都是正值的时候，取两者的最大值；

2、当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；

3、当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

如何去消除重叠：

1.外层padding
2.透明边框border:1pxsolidtransparent;　
3.绝对定位postion:absolute:
4.外层DIVoverflow:hidden;
5.内层DIV　加float:left;display:inline;
6.外层DIV有时会用到zoom:1;

以上一部分来自于各大博客的总结，有什么总结错误的地方希望大家能予以指正。谢谢。