今天整理一下margin: 为负值的几种情况

1.普通文本流元素

普通流元素margin为负值时，left,top可以理解为左边和上边收缩，

如下图

当right为负值时，右边的元素会被吸过来。
如果时块级元素，这是元素不会发生变化，因为块级元素右边没有其他元素
如果是行内块级元素，那它右边的元素会向它靠拢。

当bottom为负值时，元素后面的元素会被拉上来

如下图

在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，浏览器在计算元素位置时，会认为负边距把元素的尺寸减少了，不会管你实际的尺寸是多少。

2.浮动元素

负边距对浮动元素的影响与负边距对文档流中元素的影响其实是差不多的。文档流中元素的位置由文档流的走向决定，浮动的元素也可以看成有一个“浮动流”存在，不过浮动流既可以向左，也可以向右。

下图是三个浮动的DIV

设置margin-left:-50px,这时浮动元素会向左边收缩移动50px
第一个元素向左移动了50px,同时第二个元素也向左移动50px，覆盖了第一个元素，所以第一个元素看起来宽度只有100px，第二个150px,第三个200px.

接下来把窗口缩小，如下图，空间不够，第三个掉到下面去

这里有个注意点，如果想要第三个跑上去，那第三个元素要小于上面的空间，这时可以使用margin负值
设置第三个元素的margin-left:-160px，这时元素会收缩，收缩到上面空间能容纳，元素就会跑上去（很多布局都是利用这个原理，圣杯，双飞翼）

其实，right，top,bottom,跟上面同理，可以概括为margin为负值时，元素会向里面收缩，并且改变原来的空间（浮动流），使其周围的元素会靠拢过来，浮动元素还有一点就是当收缩到上一行元素有空间容纳它，就会跑上去
这里再说一下margin-left:-100%

原理是使对象向左移动一段距离，这段距离等于父体的内容宽度。

最后看如何用margin负值让块级元素水平垂直居中