W3C規(guī)范在介紹margin時有這樣一句話：
Negative values for margin properties are allowed, but there may be implementation-specific limits.
于是，聰明的開發(fā)者們就發(fā)現(xiàn)了很多負邊距的巧妙用法。
比如，他可以增加一個不定寬塊框的寬度，他可以讓一個框向上移動去覆蓋另一個框，他可以讓文字移動去覆蓋文字，也可以讓浮動框移動去覆蓋另一個浮動框。
利用這些特點，我們可以實現(xiàn)圣杯布局和雙飛翼布局、等高布局、多列布局等等實用的布局方式。
那么負邊距到底是如何工作的呢？也就是說，這些現(xiàn)象要怎么解釋？
我是這樣理解的：
在可視化格式模型中，一切都是框。所有的框都處于流動狀態(tài)。就像是一個個漂浮在水上的小木塊兒，水會將他們往一個地方推。
而邊距，就是用于截流。就像是將一條河截成兩段之后，后一段的水流就無法影響到前一段水流中的小木塊了兒。
普通流（normal flow）：
普通流中有塊級格式化上下文和行內(nèi)級格式化上下文。
在塊級格式化上下文中，塊級框占滿一行，從上到下依次排列。占滿一行意味著，如果他沒有被設(shè)置寬度的話，他就會橫向填充滿整個包含框。
所以，塊級格式化上下文中的流應(yīng)該是這樣的：
所以，給第一個p元素設(shè)置margin-bottom:10px;的意思就是在第一個p元素的border-bottom邊線下10px的位置，設(shè)置一條攔截線，阻止之后的框被水流沖過這條線。
而如果設(shè)置margin-bottom:-10px的話，攔截線就會被設(shè)置在第一段文字border-bottom邊線上10px的位置，之后的框會從那里開始流動，也就是會覆蓋住第一段文字10px。按照這個邏輯，在這個例子中，給第一段文字設(shè)置margin-bottom:-10px和給的二段文字設(shè)置margin-top:-10px的效果是相同的，因為他們都把攔截線設(shè)置在了同一個地方。
