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

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

浮動(dòng)規(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)容可以理解為浮動(dòng)框占據(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會(huì)改變浮動(dòng)元素的顯示位置，即使我的元素寫在DOM的后面，我也能讓它顯示在最前面。圣杯布局、雙飛翼布局啊什么的，都是利用這個(gè)原理實(shí)現(xiàn)的。
你可以試試將extra的margin-left設(shè)為-50px看看效果。

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