为什么将页边距设置为左至自动将div移至右侧

我想知道为什么将div与id="pink"一起设置为自动将div移到右侧的原因。请看图片图片：

HTML

 <div id="aqua">aqua</div> 
 <div id="yellow">yellow</div> 
 <div id="pink">pink</div>

CSS

#aqua, #yellow, #pink { border:1px solid blue;}

#pink { width:150px;
   margin-left:auto;
 }

请检查此Fiddle。

div

将margin-left设置为auto之前，推荐答案的边距和填充均为零宽度，边框宽度设置为1px。

对于正常流量的挡路级别元素，公式

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

必须保持。但是设置了所有的值之后，这是不可能发生的，并且div被认为是过度约束的。因此，将覆盖右边距属性，并将其计算为允许公式成立的值。这会将div的内容框放在容器的左侧。

设置margin-left:auto时，div不再过度约束，并且将计算左边距的值，以使上面的等式成立。这会将内容框保留在容器的右侧。

---

_{作为提示，您很有必要了解一下这个方程式。通过理解CSS布局现象的应用方式，可以解释整个类的CSS布局现象。详细信息请参见https://drafts.csswg.org/css2/visudet.html#blockwidth}