margin-left: auto;为什么可以使的元素靠右

Question

如图！

div {
  width: 100px;
  margin-left: auto;
}

上面的代码可以使得div靠近浏览器的右侧显示是为什么？

Answer 1

margin-right 不设置的话默认是0，width 定宽之后，margin-left取值为 auto ，自动占据了剩余的全部宽度，具体见 《css权威指南》 P170

Answer 2

楼上解答正解。
跟你详细解释一下吧。

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' +'border-right-width' + 'margin-right' = width of containing block

你的属于其中一种情况：
If there is exactly one value specified as 'auto', its used value follows from the equality.

也就是在上述等式中，只有你设置的margin-left: auto，那么margin-left将会被设置为满足上述等式，而等式的右边是容器盒子宽度，等式中的其它值(除过width)都为0，因此margin-left = width of containing block - width(div)

再来看一下我们经常使用的 margin: auto 水平居中的原理。

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

Answer 3

这个直接看 w3c 的规定就可以明白（中文版规定，英文版规定）。以下引用中文版相关部分：

常规流中的块级非置换元素需要满足： 'margin-left' + 'border-left-width' + padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含塊的寬度

若恰好只有一個值被指定為 'auto'，則該使用值由等式求出

你的问题中除了 width 和 margin-left 其他值都是 0 ，把宽度值带入计算得到 margin-left = 包含块的宽度-100px 。所以最终 div 会靠近包含块的右边。