关于盒子的左右外边距的困惑

之前一直有一个疑问：对于左右摆放的两个盒子，在水平方向上都可以自由移动，如果给左边盒子一个margin-right值，是左边的盒子往左走，还是右边的盒子往右走。答案是后者。
对于外边距，看的时候只看一个盒子，不要两个盒子一起看，否则容易混淆。对于一个盒子来说，给它一个margin-left，盒子会走。给它margin-right，盒子是不动的。如果想让盒子走只能通过设置其margin-right值来实现。


通过上面的显示结果可以得知：虽然左边的盒子初始位置贴着边，但是也还是能够继续往左边移动的，注意截图的左边就是浏览器最左边的边缘了。
下面验证最开始提出的问题，编写代码如下：

显示结果如下：

可以看出是右边的盒子在往右走。
起点和终点的方法：对于两个盒子来说，首先要判断是哪个盒子移动，然后找到外边距的起点和终点确定要移动的盒子具体走到哪个位置。
s:start e:end

如果给左边盒子设置一个负的margin-right值，结果会怎样呢：
编写代码如下：

显示结果如下：

右边的盒子往左走了50像素，并且压住了左边的盒子。
用理论来解释：