負(fù)外邊距的應(yīng)用：為什么對aside margin-left: -100px，它就可以上去，什么原理

div是放同一行的. 當(dāng)一行放不下的時候.會自動 擠到下一行. margin-left 是距離上一個對象左邊的距離. 你設(shè)置為負(fù)值就擠到前一個對象里面去了.

根據(jù)w3c的規(guī)范所述浮動盒會盡可能的向上浮動，然后浮動盒占據(jù)空間的是其margin box，這里的負(fù)margin實際上使得那個浮動框的margin box寬度為0，存在向上浮動的可能，用戶代理遵循規(guī)范自然就讓他浮上去了

浮動規(guī)則第九條

left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

然后以下內(nèi)容可以理解為浮動框占據(jù)空間的是其margin box

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

負(fù)margin會改變浮動元素的顯示位置，即使我的元素寫在DOM的后面，我也能讓它顯示在最前面。圣杯布局、雙飛翼布局啊什么的，都是利用這個原理實現(xiàn)的。
你可以試試將extra的margin-left設(shè)為-50px看看效果。

這些div塊都設(shè)置了左浮動，它們會在一行排列，當(dāng)超過一行就會換行顯示，aside這個div塊本來是剛好在第二行左邊顯示的，但它設(shè)置了左邊距margin-left，負(fù)值就是相對于原本位置再向左移動，剛好就是aside的寬度，所以又上去上面一行了，所以extra也就在第二行的最左邊。