本文版權(quán)歸鄭哲明和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源
keywords: 負(fù)margin、浮動(dòng)元素。
預(yù)警：下文僅僅是本人猜想，歡迎拍磚。
我們都知道，負(fù)margin可以使元素或其相鄰元素（右邊或下面）移動(dòng)，但具體為什么會(huì)產(chǎn)生這種現(xiàn)象呢？瀏覽器是又如何處理負(fù)margin的？只有清楚了這兩個(gè)問(wèn)題，才能明白負(fù)margin對(duì)浮動(dòng)元素的影響，比如：
看起來(lái)，浮動(dòng)元素脫離普通文檔流之后，似乎彼此間形成了通路，相互間可以利用負(fù)margin移動(dòng)。
但其中的原理真的是這樣嗎？
在瀏覽器中，最重要的概念莫過(guò)于盒模型，任何元素都會(huì)有一個(gè)盒子，可以這樣說(shuō)，瀏覽器渲染出的頁(yè)面只不過(guò)是一群盒子的有序排列而已。我們知道，一個(gè)盒子包括這樣幾個(gè)部分：margin、border、padding、content。
無(wú)論是行內(nèi)元素還是塊級(jí)元素、浮動(dòng)元素等，它們的盒子本質(zhì)上沒(méi)有什么區(qū)別。一個(gè)元素所占據(jù)的空間就是盒子所占據(jù)的空間。因此，負(fù)margin移動(dòng)元素的原理也就水落石出了：負(fù)margin會(huì)縮小或擴(kuò)大盒子所占據(jù)的空間。
當(dāng)元素使用負(fù)margin-left：
盒子空間減少，當(dāng)然就向右移動(dòng)，挨著包含塊的邊框排列了，但同時(shí)，元素的寬高沒(méi)變，因此視覺(jué)上看，元素的大小沒(méi)有變化。其余負(fù)marign同理。
負(fù)margin對(duì)浮動(dòng)元素的影響也逃脫不了上述原理，就不具體演示了。
這里提示一點(diǎn)，負(fù)margin-left與負(fù)margin-right有些許不同（top和bottom同理）：
負(fù)margin-left無(wú)下限，負(fù)margin-right有下限，為盒子的原始大小。
至于兩者移動(dòng)方向的區(qū)別，我想，也比較好理解。
另外，如果元素寬度不固定，而是平鋪整行，使用負(fù)margin會(huì)擴(kuò)大內(nèi)容寬度。
lazy：（……………………
