margin边距碰撞

记得以前在看《CSS实践手册》的时候，看到过“边距碰撞”这样的例子与解释。自己大概记得是这样说的： 

当两个具有margin-top或margin-bittom的块元素垂直排列在一个父类的块元素里面的时候，边距的算法在不同的浏览器是算法略有不同。在IE6中，一般都是取margin比较小一个作为两个块元素的margin。解决办法就是用padding替代margin。

我以自己不会遇到这样的情况，没想到今天在写页面的时候，自己测试浏览器时发现Maxthon出现了这样的问题。其它的都没有这样的现象，边ie6都没有。真郁闷死我了。一开始自己还没有想到是边距碰撞的问题，自己就加上背景色来调试。调试了好久都有效果。后来才想到边距的问题。下面是下精简版，好让自己在以定页面的时候能快速的解决类似的问题。

xhtml代码：

 
 <div id="hotelFram">        
      
         <div class="hotelCate">        
      
             <div class="FeaturedHotels" id="InternationalHotel">        
      
                 <p class="p1">1这里是垂直下来的第一个div，叫作InternationalHotel！底部有一个属性是:margin-bottom:10px;</p>        
      
                 <p class="p2">2</p>        
      
                 <p class="p3">3</p>        
      
                 <p class="p4">4</p>        
      
                 <p class="p5">5</p>        
      
             </div>        
          
             <div class="FeaturedHotels" id="DomesticHotels">        
      
                 <p class="p6">6这里是垂直下来的第二个div，叫作DomesticHotels！底部有一个属性是:margin-bottom:10px;</p>        
      
                 <p class="p7">7</p>        
      
                 <p class="p8">8</p>        
      
             </div>        
      
         </div>        
      
         <div class="hotelAd">        
      
             <p>这里主要是广告、杂七杂八的</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
             <p>&nbsp;</p>        
      
         </div>        
          
     </div>        
          
     <div id="ShareNews">        
      
         <div class="shareFrame floatLeft">        
      
             <p class="p9">9这里是shareFram,向左浮动的！目的是让两个DIV能在同一列显示</p>        
      
             <p class="p10">10</p>        
      
             <p class="p11">11</p>        
      
             <p class="p12">12</p>        
      
         </div>        
      
         <div class="newsFrame floatRight">        
      
             <p class="p13">13这里是newsFrame,向右浮动的！目的是让两个DIV能在同一列显示</p>        
      
             <p class="p14">14</p>        
      
             <p class="p15">15</p>        
      
             <p class="p16">16</p>        
      
         </div>        
      
     </div>        
     
    

css代码：

 
 *{ margin:0px; padding:0px; font-size:12px; }         
      
 .floatRight { float:right; }         
      
 .floatLeft {float:left; }         
      
 #hotelFram { width:990px; margin:10px auto 0px; overflow:hidden; background:#999; }         
      
     .hotelCate { width:770px; float:left; overflow:auto; }         
      
     .hotelAd { width:200px; float:right; background:#F9C; }         
      
     .FeaturedHotels { float:left; width:770px; margin-bottom:10px; overflow:hidden; }         
      
 #ShareNews { width:990px; margin:0px auto; overflow:hidden; background:#CCC; }         
      
     .shareFrame { width:590px; overflow:hidden; background:#930; }         
      
     .newsFrame { width:390px; overflow:hidden; background:#FF0; }         
      
 #InternationalHotel { background:#0F0; }         
      
 #DomesticHotels { background:#0F0; }         
      
 .p1 { background:#90F; }         
      
 .p2 { background:#96F; }         
      
 .p3 { background:#99F; }         
      
 .p4 { background:#9CF; }         
      
 .p5 { background:#9FF; }         
      
 .p6 { background:#C0F; }         
      
 .p7 { background:#C6F; }         
      
 .p8 { background:#C9F; }         
      
 .p9 { background:#CCF; }         
      
 .p10 { background:#CFF; }         
      
 .p11 { background:#F0F; }         
      
 .p12 { background:#F6F; }         
      
 .p13 { background:#F9F; }         
      
 .p14 { background:#FCF; }         
      
 .p15 { background:#FFF; }         
      
 .p16 { background:#33C; }        
     
    

出现的效果大致如下：

FF效果

IE效果：

Maxthon效果：

解决办法就是将margin-bottom:10px; 换成padding-bottom:10px;搞定！