论负margin对浮动元素的影响

本文版权归郑哲明和饥人谷所有，转载请注明来源

---

keywords: 负margin、浮动元素。

---

预警：下文仅仅是本人猜想，欢迎拍砖。

我们都知道，负margin可以使元素或其相邻元素（右边或下面）移动，但具体为什么会产生这种现象呢？浏览器是又如何处理负margin的？只有清楚了这两个问题，才能明白负margin对浮动元素的影响，比如：

负margin对浮动元素的影响

看起来，浮动元素脱离普通文档流之后，似乎彼此间形成了通路，相互间可以利用负margin移动。

负margin对浮动元素的影响.gif

但其中的原理真的是这样吗？

在浏览器中，最重要的概念莫过于盒模型，任何元素都会有一个盒子，可以这样说，浏览器渲染出的页面只不过是一群盒子的有序排列而已。我们知道，一个盒子包括这样几个部分：margin、border、padding、content。

无论是行内元素还是块级元素、浮动元素等，它们的盒子本质上没有什么区别。一个元素所占据的空间就是盒子所占据的空间。因此，负margin移动元素的原理也就水落石出了：负margin会缩小或扩大盒子所占据的空间。

当元素使用负margin-left：

负marign-left.gif

盒子空间减少，当然就向右移动，挨着包含块的边框排列了，但同时，元素的宽高没变，因此视觉上看，元素的大小没有变化。其余负marign同理。

负margin对浮动元素的影响也逃脱不了上述原理，就不具体演示了。

这里提示一点，负margin-left与负margin-right有些许不同（top和bottom同理）：
负margin-left无下限，负margin-right有下限，为盒子的原始大小。
至于两者移动方向的区别，我想，也比较好理解。

另外，如果元素宽度不固定，而是平铺整行，使用负margin会扩大内容宽度。

lazy：（……………………