margin值的原理到底是什么？为什么我越想越复杂？

Question

学CSS到浮动，昨天回头看盒模型，发现margin值很多情况越想反而越糊涂

网上说margin的top和left负值以其相邻的元素为参照物，所以会有移动的情况，bottom和right负值以自己为参照物所以不移动，会把后边的元素拉近并能覆盖当前元素上面，

我搜了搜看了这篇博客，当时豁然开朗：

https://www.cnblogs.com/livew...

外边距就像截线，隔开其它元素，左边距设置-10px，截线在元素border-left左侧位置10px的位置，元素 “流” 向拦截线的位置，于是向左移动了，后面有相邻元素的话也跟着文档流移动

左浮动情况下也这么解释的，但是我测试了下右浮动：

给.last设置正右外边距

.last{
   ...;
   margin-right: 50px;
}

谷歌渲染结果：

首先设置right和bottom方向上的外边距不是不会移动吗？

为什么不是右边的元素出去50px？

因为文档流还是浮动？到这儿负值还没理解反而正值也糊涂了

于是又搜到一名叫圆心的很多年前的文章，这里是转发他的：

https://www.shuzhiduo.com/A/r...

“在 margin 中 top、right、bottom、left 的参考线并不一致为一类，而是分为了两类参考线，top 和 left 的参考线属于一类，right 和bottom 的参考线属于另一类。那他们到底各以什么为参考线呢?top边距 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移;left边距 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。right边距 以元素本身的 border 右边为参考线水平向右位移;bottom边距 以元素本身的border 下边为参考线垂直向下位移。从上我们可以看到 top 和 left 都是以外元素为参考，而 right 和 bottom 以本元素为参考。上面的位移方向是指 margin 数值为正值时候的情形，如果是负值则位移方向相反。”

当时好像懂了，像body只有一个div的时候，宽高就设置100px颜色就粉色，

当margin-left：100px，元素左边距以body 的content 左边为参考线水平右移100px，所以元素向右移动了100px;
当margin-left：-100px，元素左边距以body 的content 左边为参考线水平左移100px,所以元素像左移动了100px;

当margin-right：100px,元素右边距以本身的border 右边为参考线水平向右位移，所以元素没移动，只是逻辑宽度向右增加了100px;
当margin-right：-100px,元素右边距以本身的border 右边为参考线水平向左位移，元素没移动，逻辑宽度减少了，如果后面有其它的元素会向做左流动100px覆盖在上面

用第一篇博客也讲得通
margin-left：-100px，元素的拦截线设置在border-left左侧100px的位置，它就会去填满那100px空隙，后面有元素也跟着向左流动100px;
margin-left：100px，元素的拦截线设置在border-left右侧100px的位置，元素就会向右移动100px;

margin-right：100px,元素的拦截线设置在border-right右侧100px的位置，所以元素不会移动
margin-right：-100px,元素的拦截线设置在border-right左侧100px的位置，元素没移动，逻辑宽度减少了，如果后面有其它的元素会向做左流动100px覆盖在上面

但回到我最上面margin-right：50px的案例

我代入两篇博客发现自己还是解释不了

设置margin-right：50px,怎么元素不把最右边的元素即.middle给挤到右外边？

原理怎么轮到右浮动就不灵了？

难道有.middle元素占位了就像到边了不行了？而左边有空隙只好往左边移动

会是文档流只能从下到上，从右到左的原因吗？

如此所有关于margin的文章就不要武断的说margin设置right和top时元素不移动，或者加上“首先要看当前设置外边距元素的所处位置”

最后回到margin-right：-50px时

.last{
    ...;
    margin-right: -50px;
}

浏览器渲染结果

如果.middle和.last是左浮动，此时结果会是许多博客和上述“截线”、“参考线”写的那样，后面的元素覆盖在.last上，但是右浮动相反，反而是.last覆盖在.middle上，如此“截线”说法解释不了，“参考线”也一样

把例子样式改成：

这是很多关于讲margin负值的博客中的案例，然后给.middle设置margin-left: -100px;

.middle就上去了，原理第一篇博客说了，但我全部右浮动：

然后给.middle设置margin-right: -100px;

跟上面的类似换了个方向而已，但是用第一篇博客中说的截线，那负右外边距时“截线”不是在.middle中间吗，难道右浮动了后最右边反而成了最左边？

这样的话就可以解释了，当我给.middle设置margin-left: -100px;

-200px、-300px...元素不动了，是因为此时两个子元素盒模型宽度尺寸之和等于父元素宽度后再设置就是约定过束了吗？

望各位前辈大佬解惑，不吝赐教，后学顿首！！！