剛剛開始學習css的時候，我采用了float為主來實現布局的方式，但是運用浮動很長一段時間之後，我發現這是一種被人牽著鼻子走的做法。至少，頁面上不應過多的運用浮動，尤其是不要拿來確定整個布局。
很簡單的道理，當你用了float:left,後面的div很可能需要跟著用float:left，而且當寬度不夠的時候，本來該和上一個div一個水平線上的div跑到下面去了，如果某個div有margin屬性，還會遇到ie6那個煩人的bug。而且浮動之後，你還必須在合適的地方使用清除浮動。
為了形象、易懂的解釋負margin，我們將引入W3C上沒有的參考線的說法。何謂參考線？參考線就是 margin移動的基准點，此基准點相對於box(自身)是靜止的。而margin的數值，就是box相對於參考線的位移量。
一個完整的margin屬性是這麼寫的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。在margin屬性中一共有兩類參考線，top和left的參考線屬於一類，right和bottom的參考線屬於另一類。top和left是以外元素為參考，right和bottom是以元素本身為參考。margin的位移方向是指margin數值為正值時候的情形，如果是負值則位移方向相反。
先看看一個完整的例子
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Margin參考線舉例說明</title>
<style type="text/css">
*{margin:0; padding:0;}
.wrap{width:400px; border:5px solid #aaa;}
.example{width:200px; height:200px; background:#CCCCFF;}
.normal{width:200px; height:200px; background:#CCE8CF;}
.example{margin:-10px 20px -30px 40px;}
</style>
</head>
<body>
<div class="wrap">
<div class="example">example元素：margin參考線舉例說明文字，請查看此元素由於margin的變化所移動的位移量。</div>
<div class="normal">一個普通的Box</div>
</div>
</body>
</html>
來分析這段代碼，example元素下方有一相鄰元素normal（注：這裡分析的是添加和刪除margin後的example元素，normal元素僅作為example元素前後效果的參照）。
根據上文的參考線原理margin:-10px(top) 20px(right) -30px(bottom) 40px(left); 上-10px和左40px將以外元素為參考，所謂外元素就是本元素的邊界元素（再白話點的解釋就是元素的緊鄰元素，這裡涉及到containing block知識，可自行網上搜索）。example元素上邊和左邊的邊界元素即為wrap父元素，wrap父元素為基准點，example的margin-top為-10px，想象下如果這裡margin-top為+10px會什麼情況，沒錯如果為+10px，example元素相對於wrap父元素邊緣為基准，那麼example元素會同wrap父元素10px產生間隙邊距，那麼反過來，margin-tip:-10px;還是與wrap父元素邊緣為基准，反過來向上推10px的距離位置。example元素的margin-left為40px，這裡就按照正常邏輯相隔40px邊距，同理如果為-40px，那麼就是反方向向左推進40px的距離位置。
再來看example元素的margin-right和margin-bottom，由上文得知這倆個值是以元素本身為參考。什麼叫以元素本身為參考呢，確切含義是指以自身為參考來影響周圍元素的位置（實質即為影響下邊和右邊相鄰元素的參考線）。這裡的margin-bottom為-30px，對於其自身位置沒有任何變化，但是對於其下方元素normal元素產生了極大的影響，因為normal元素的上邊界元素即為example元素，根據example元素邊界來判定自身位置，想象下如果example元素margin-bottom為+30px，那麼example元素將隔開下方的normal元素，反之為-30px，下方normal元素由於example參考線內凹，導致了normal元素自個兒身不由己的被“提”了上去了。這就是以自身為參考影響周圍元素位置的含義。
當margin四個值都為正數值的話，那麼margin按照正常邏輯同周圍元素產生邊距。當元素margin的top和left是負值時會引起元素的向上或向左位置移動。而當元素margin的bottom和right是負值時會影響右邊和下邊相鄰元素的參考線。
接下來我們將利用兩個例子深入講解負margin技術的應用領域。
負margin在Tab選項卡中的應用：
最核心的就是下方倆行高亮部分代碼，第二行的margin-bottom:-1px;使下方的正文部分向上“提”了1px的距離，從而達到了鼠標上移後選項卡白色遮住下方黑色邊框的效果（注：由於IE不是符合W3C標准，所以當鼠標移到選項卡上時需要添加一個額外屬性position:relative;來修復IE不覆蓋下方邊框的這個Bug）。第四行的margin-left:-1px;的目的是讓四個選項卡向左移動1px的距離，達到左右都只有一條分割線的效果。
.demoTab{width:400px; font:14px/1.5 Microsoft YaHei,verdana,Helvetica,Arial,sans-serif;}
.demoTab .demoTabHd{margin-bottom:-1px; border:1px solid #6C92AD; border-bottom:none; background:#EAF0FD;}
.demoTab .demoTabNav{height:28px; overflow:hidden; *zoom:1;}
.demoTab .demoTabList{float:left; margin-left:-1px; padding:0 22px; line-height:28px; border-left:1px solid #6C92AD; border-right:1px solid #6C92AD; font-weight:bold; color:#005590; text-align:center; cursor:pointer;}
.demoTab .demoTabList.current{position:relative; background:#fff;}
.demoTab .demoTabBd{border:1px solid #6C92AD;}
.demoTab .demoTabBd .roundBox{padding:15px;}
.demoTab .demoTabContent{display:none;}
.demoTab .demoTabContent.current{display:block;}
HTML代碼：
<div id="demoTab" class="demoTab">
<div class="demoTabHd">
<ul class="demoTabNav clearfix">
<li class="demoTabList current">前端</li>
<li class="demoTabList">實戰</li>
<li class="demoTabList">交互</li>
<li class="demoTabList">優化</li>
</ul>
</div>
<div class="demoTabBd">
<div class="roundBox">
<div class="demoTabContent current">這是第一個選項卡的內容。</div>
<div class="demoTabContent">這是第二個選項卡的內容。</div>
<div class="demoTabContent">這是第三個選項卡的內容。</div>
<div class="demoTabContent">這是第四個選項卡的內容。</div>
</div>
</div>
</div>
利用負margin制作自適應左右布局：
.demoLayout{width:500px; border:1px solid #aaa; background:#EEEEEE;}
.demoLayout .roundBox{padding:10px; min-height:170px; _height:170px;}
.demoLayout .demoShowPic img{padding:1px; border:1px solid #DAA520;}
.demoText{margin:-170px 0 0 215px;}
.demoLayoutBtn{margin:15px 0 0 0;}
<div id="demoLayout" class="demoLayout">
<div class="roundBox">
<div class="demoShowPic"><img width="200" height="166" src="toygersKittens.jpg" alt="toygers kittens" /></div>
<div class="demoText">利用負margin制作自適應左右布局</div>
</div>
</div>
如上例這類布局效果（左邊一個固定圖片，右邊為內容），負margin能夠替代float浮動布局，進行左右布局規劃，並且擁有float所沒有的自適應效果。
根據上面的幾個實例，相信你已經對負margin技術有了一個比較完整的理解。負margin不但可以做出一般CSS屬性所不能達到的效果還能夠化繁為簡、化腐朽為神奇之奇效，當然負margin用到的地方不僅僅是這些，還有許多效果都是需要負margin技術來實現的，只要你耐心的去實踐去探索，相信你會發現更多負margin用到得場合。