负外边距的应用：为什么对aside margin-left: -100px，它就可以上去，什么原理

Question

代码http://js.jirengu.com/tegaq/1...

Answer 1

这些div块都设置了左浮动，它们会在一行排列，当超过一行就会换行显示，aside这个div块本来是刚好在第二行左边显示的，但它设置了左边距margin-left，负值就是相对于原本位置再向左移动，刚好就是aside的宽度，所以又上去上面一行了，所以extra也就在第二行的最左边。

Answer 2

div是放同一行的. 当一行放不下的时候.会自动 挤到下一行. margin-left 是距离上一个对象左边的距离. 你设置为负值就挤到前一个对象里面去了.

Answer 3

负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。
你可以试试将extra的margin-left设为-50px看看效果。

Answer 4

根据w3c的规范所述浮动盒会尽可能的向上浮动，然后浮动盒占据空间的是其margin box，这里的负margin实际上使得那个浮动框的margin box宽度为0，存在向上浮动的可能，用户代理遵循规范自然就让他浮上去了

浮动规则第九条

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.

然后以下内容可以理解为浮动框占据空间的是其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.