最近有一个朋友问我关于margin的问题,才发现原来水平方向上的margin是不能叠加的。于是便查了查负margin(negative margin)。结果发现了这么有趣的东西。

左右列固定，中间列自适应布局

此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。
html:

<div class="main"> 
 <div class="main_body">Main</div> 
</div> 
<div class="left">Left</div> 
<div class="right">Right</div>

css:

 body{ margin:0; padding:0; min-width:600px; } 
.main{ float:left; width:100%; } 
.main_body{ margin:0 210px; background:#888; height:200px; } 
.left,.right{ float:left; width:200px; height:200px; background:#F60; }
 .left{ margin-left:-100%; } 
.right{ margin-left:-200px; }

效果：

去除列表有边框

项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置*margin-right:0; *这种方法需要动态判断为哪些li元素添加class，麻烦！！！利用负margin就可以实现下面这种效果：
html:

<div id="test"> 
 <ul> 
   <li>子元素1</li> 
   <li>子元素2</li> 
   <li>子元素3</li> 
   <li>子元素4</li> 
   <li>子元素5</li> 
   <li>子元素6</li> 
 </ul> 
</div>

css:

 body,ul,li{ padding:0; margin:0;} ul,li{ list-style:none;} 
#test{ width:320px; height:210px; background:#CCC; } 
#test ul{ margin-right:-10px; zoom:1; } 
#test ul li{ width:100px; height:100px; 
background:#F60; margin-right:10px; margin-bottom:10px; float:left; }