负margin总结

    为元素设置的margin值为负时，会根据元素不同的特性表现出不同的效果：

到底有哪些情况呢？有以下四种

1、正常流中的元素，就是没设置浮动，没设置定位的元素或说position为static的（posotion:static是默认的样式）

元素设置的margin为负值时：
        1、margin-top/margin-left为负，元素会移动，怎样移动呢？很显然，分别向上和向左移动。比如，设置 margin-left: -100px;。 那么，元素会往左移动 100px。对于设置 margin-top 也是一样的道理。
        但是！！！！！！！
        2、margin-bottom/margin-right为负值时，情况就不一样了，元素并不移动，更别说往对应方向移动了；这种情况是，该元素后面/右面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面。
        比如，设置 margin-right: -100px;。那么，元素本身并不会移动，后面的元素会向左移动 100px 到该元素上。（如果右面有元素的话）对于设置 margin-bottom 也是同样的道理。
        3、同时，在元素不指定宽度的情况下，如果设置 margin-left 或者 margin-right 为负值的话，会在元素对应的方向上增加其宽度。效果就和设置 padding-left 或者 padding-right 一样。

2、元素没有设置浮动且 position 为 relative

与第一种情况一样，唯一不同的就是margin-bottom/margin-right为负值时，该元素与后面元素的覆盖方式不一样，此处该元素会覆盖在后面元素的上面（不考虑你为后面元素设置了定位，改变了层叠优先级）

3、元素没有设置浮动且 position 为 absolute

与第一种情况不同的是，由于设置绝对定位的元素已经脱离了标准文档流，所以，设置 margin-right/bottom 对后面的元素并没有影响。

4、元素设置了浮动

如果设置的 margin 的方向与浮动的方向相同，那么，元素会往对应的方向移动对应的距离。

如果设置 margin 的方向与浮动的方向相反，则元素本身不动，元素之前或者之后的元素会向钙元素的方向移动相应的距离。