上下margin重叠传递问题

　　我发现强迫症真的是我一个大病。。。每次都非得把全部状况都实验出来不可。。。BUT!!!!!!!!!悲催的是，这么多状况我根本记不住。。。仍是要在写代码的时候不断出错再排错~受不了本身了！不过仍是把这部分总结到这里啦~

下面的几个部分应该是margin重叠问题的全部状况了：

一、两个普通元素上下的margin会合并为一个margin，哪一个大选哪一个！

    两个浮动元素不会出现margin传递的问题，依然是上面元素的margin-bottom和下面元素的margin-top相加做为二者之间的margin值。

二、两个元素若是是包含关系，父元素和子元素上下margin值也会合并

当父元素不加边框， 不设置宽高，即父级没有触发haslayout时	IE六、7和标准浏览器下，均会发生margin传递问题 子元素和父元素的高度相同（子元素的top将和父元素的top在一条直线上，bottom将和父元素的bottom在一条直线上） 而父元素则选择二者之间大的数值做为父元素的margin-top值和margin-bottom值！！！ 子元素的margin-left和margin-right值依然存在
当父元素不加边框， 可是，设置宽或高或zoom：1；即父级加能够触发haslayout的属性时	标准浏览器下，会发生margin传递 可是在IE六、7下则不会发生margin传递（即子元素的margin就是相对于父元素的，不会传递给父级）
当父级加边框，而且父级没有触发haslayout时	标准浏览器下，不会发生margin传递 IE六、7下，子元素的margin完全消失！
当父级加边框，而且父级触发haslayout（即加width或height或zoom：1）时，	IE六、7和标准浏览器下，都不会发生margin传递！！！

对于IE6、7来讲：

　　即只要触发haslayout，无论给不给父元素加边框，无论标准浏览器会不会发生margin传递，IE6、7下都不会发生margin传递！！！

而对于标准浏览器来讲：

　　只有加边框才能避免margin传递！！！

　　给父元素添加边框，则子元素和父元素之间的margin就有分割线了，此时将不会发生合并现象了！若是给子元素添加边框二者的margin值仍是没有被分开，因此依然还会发生重叠现象！

 

 

　　若是这里父元素里包含了多个块子元素，则每一个子元素之间知足上下margin重叠，选择二者较大的margin做为二者之间的margin，第一个子元素的top和父元素重叠（左图上面白色距浏览器顶的白色区域便是），最后一个子元素的bottom和父元素重叠。IE六、7和标准浏览器显示效果均如左图。

　　此时，若是两个块元素是浮动元素，那么，那么就不存在子元素和父元素的margin传递状况，此时，上下的margin值则是二者之间的各自margin值相加！标准浏览器显示以下图中，IE6显示以下图右。但为何显示有差别呢？由于，额滴神啊！一波未平一波又起！块状元素和横向margin和浮动三者引起了IE6的新的兼容性问题——双边距bug（注意IE7没有双边距bug！！！！）

由此

　　实践时，首先必定要给父元素加触发haslyout的属性！这一条保证了在IE六、7下不出现margin传递问题和margin值消失问题；

　　而后，考虑在标准浏览器下，给子元素加浮动能够解决没有border时出现的margin传递问题，可是此时加浮动后会形成IE6的双边距bug，

　　因此咱们实践时尽可能将浮动的块状元素的margin换为padding，若是实在不能换就给该元素加display:inline;！

       

三、两个Div（A、B）上下之间没有margin值，可是A中有子元素有margin，这时该子元素的margin值会传递到二者间，会使A、B两个元素之间填充上margin，仅限垂直方向！！！

 

对于这个问题，大概就是这样啦，其实也很简单，只是我把全部的状况列出来了，其实综合起来就是上面总结部分的内容。

我感受这个margin传递和重叠都是由于二者的margin值之间没有边框或者是padding将margin这一空白区域隔开！！！！