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

 当两个具有margin-top或margin-bittom的块元素垂直排列在一个父类的块元素里面的时候，边距的算法在不同的浏览器是算法略有不同。在IE6中，一般都是取margin比较小一个作为两个块元素的margin。解决办法就是用padding替代margin。
我以自己不会遇到这样的情况，没想到今天在写页面的时候，自己测试浏览器时发现Maxthon出现了这样的问题。其它的都没有这样的现象，边ie6都没有。真郁闷死我了。一开始自己还没有想到是边距碰撞的问题，自己就加上背景色来调试。调试了好久都有效果。后来才想到边距的问题。下面是下精简版，好让自己在以定页面的时候能快速的解决类似的问题。

xhtml代码：

  1. <div id="hotelFram"> 
  2.         <div class="hotelCate"> 
  3.             <div class="FeaturedHotels" id="InternationalHotel"> 
  4.                 <p class="p1">1这里是垂直下来的第一个div，叫作InternationalHotel！底部有一个属性是:margin-bottom:10px;</p> 
  5.                 <p class="p2">2</p> 
  6.                 <p class="p3">3</p> 
  7.                 <p class="p4">4</p> 
  8.                 <p class="p5">5</p> 
  9.             </div> 
  10.                       
  11.             <div class="FeaturedHotels" id="DomesticHotels"> 
  12.                 <p class="p6">6这里是垂直下来的第二个div，叫作DomesticHotels！底部有一个属性是:margin-bottom:10px;</p> 
  13.                 <p class="p7">7</p> 
  14.                 <p class="p8">8</p> 
  15.             </div> 
  16.         </div> 
  17.         <div class="hotelAd"> 
  18.             <p>这里主要是广告、杂七杂八的</p> 
  19.             <p>&nbsp;</p> 
  20.             <p>&nbsp;</p> 
  21.             <p>&nbsp;</p> 
  22.             <p>&nbsp;</p> 
  23.             <p>&nbsp;</p> 
  24.             <p>&nbsp;</p> 
  25.             <p>&nbsp;</p> 
  26.         </div> 
  27.           
  28.     </div> 
  29.       
  30.     <div id="ShareNews"> 
  31.         <div class="shareFrame floatLeft"> 
  32.             <p class="p9">9这里是shareFram,向左浮动的！目的是让两个DIV能在同一列显示</p> 
  33.             <p class="p10">10</p> 
  34.             <p class="p11">11</p> 
  35.             <p class="p12">12</p> 
  36.         </div> 
  37.         <div class="newsFrame floatRight"> 
  38.             <p class="p13">13这里是newsFrame,向右浮动的！目的是让两个DIV能在同一列显示</p> 
  39.             <p class="p14">14</p> 
  40.             <p class="p15">15</p> 
  41.             <p class="p16">16</p> 
  42.         </div> 
  43.     </div> 

 

css代码：

 

  1. *{ margin:0px; padding:0px; font-size:12px; }  
  2. .floatRight { float:right; }  
  3. .floatLeft {float:left; }  
  4. #hotelFram { width:990px; margin:10px auto 0px; overflow:hidden; background:#999; }  
  5.     .hotelCate { width:770px; float:left; overflow:auto; }  
  6.     .hotelAd { width:200px; float:right; background:#F9C; }  
  7.     .FeaturedHotels { float:left; width:770px; margin-bottom:10px; overflow:hidden; }  
  8. #ShareNews { width:990px; margin:0px auto; overflow:hidden; background:#CCC; }  
  9.     .shareFrame { width:590px; overflow:hidden; background:#930; }  
  10.     .newsFrame { width:390px; overflow:hidden; background:#FF0; }  
  11. #InternationalHotel { background:#0F0; }  
  12. #DomesticHotels { background:#0F0; }  
  13. .p1 { background:#90F; }  
  14. .p2 { background:#96F; }  
  15. .p3 { background:#99F; }  
  16. .p4 { background:#9CF; }  
  17. .p5 { background:#9FF; }  
  18. .p6 { background:#C0F; }  
  19. .p7 { background:#C6F; }  
  20. .p8 { background:#C9F; }  
  21. .p9 { background:#CCF; }  
  22. .p10 { background:#CFF; }  
  23. .p11 { background:#F0F; }  
  24. .p12 { background:#F6F; }  
  25. .p13 { background:#F9F; }  
  26. .p14 { background:#FCF; }  
  27. .p15 { background:#FFF; }  
  28. .p16 { background:#33C; } 

 

出现的效果大致如下：

FF效果

margin边距碰撞_休闲

IE效果：

margin边距碰撞_休闲_02

Maxthon效果：

margin边距碰撞_边距碰撞_03

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

修改之后的Maxthon效果：

margin边距碰撞_margin_04