前言##
前几天写了一篇关于 margin负值的博文，以为理解了其中的奥秘，但是今天把《css权威指南》中关于外边距的一章看了一遍，发现还是有不能理解的地方，所以特此更一篇博文，解答自己的疑惑~
普通文档流中的margin负值##
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin-负值</title>
<style>
.div1,
.div2{
400px;
height: 150px;
color:red;
}
.div1{
background: #40a;
}
.div2{
background:rgba(0,1,0,.5);
}
</style>
</head>
<body>
<div class="div1">
div1 margin对普通文档流的影响 对普通文档流的影响 对普通文档流的影响
</div>
<div class="div2">div2 margin对普通文档流的影响 margin对普通文档流的影响</div>
</body>
</html>
效果：
普通文档流中的元素在页面中的位置是根据文档流的变化而变化的。负边距会使在文档流中的元素发生偏移，这种偏移与相对定位不同的是**元素不再占有偏移前的空间，所以，文档流中其他元素会“流”过来，填补空白。
给两个div增加负边距之后：
.div1,
.div2{
400px;
height: 150px;
margin: -25px;
color:red;
}
效果：
由效果可知：两个div都向上,向左移动了25px，但是负边距并没有减小元素在文档流的尺寸，只是在计算元素位置时，会认为负边距减少了元素的尺寸。
接下来，看另外一个例子~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margain-demo2</title>
<style>
.div3{
300px;
/*注意 父容器并没有设置高度，高度由内容决定*/
border: 4px solid #8ad;
/*overflow: hidden;*/
}
.div4,.div5{
/*两个子元素设置了高度和宽度*/
300px;
height: 200px;
}
.div4{
background:#eee;
}
.div5{
background:rgba(1,0,0,.3); margin-bottom: -20px;
}
</style>
</head>
<body>
<div class="div3">
<div class="div4">div4</div>
<div class="div5">div5</div>
</div>
</body>
</html>
注意 父容器并没有设置高度，高度由内容决定
效果：
div5不加margin-bottom: -20px;属性前：
添加之后：
可见，父容器的高度变小！
也就是说margin-bottom为负数会影响未设定高度父元素的高度，子元素自身的高度不变
在IE8+以及那些标准浏览器中，给父元素添加一个overflow:hidden;的属性
因为父元素的高度变了，但子元素的高度没有发生改变，所以需要使子元素超出隐藏。如下图：
所以，在文档流中，元素的“边界”由margin决定，margin为负值时，“边界”向里收，文档流只认边界,而不是元素的实际尺寸。
负边距对元素宽度的影响##
前提：没有设定元素的width属性
.div6{
400px;
border: 4px solid #8ad;
margin: 0 auto;
}
.div7{
height: 200px;
background:rgba(1,0,0,.3);
margin: 0 -100px;
}
<div class="div6"><div class="div7">div7</div></div>
效果:
margin-right/margin-left为负值，父元素指定了宽度的情况下子元素也会把自身拉长
补充##
通过给浮动元素设定margin负值也能导致元素之间存在覆盖
负数margin对于绝对定位元素的影响主要有：利用绝对定位元素来实现元素垂直水平居中，不过这种居中的实现依然要知道元素本身的尺寸!
absolute定位与margin定位其实是没有什么冲突的，无论absolute元素是否设置了left/top值，其margin属性值都是可以起作用的!
总结##
除了父元素指定了宽度，而子元素通过margin-right/margin-lef负值改变了元素自身的大小这种情况，margin-left/margin-right/margin-bottom/margin-top并不会改变元素本身的大小。margin-left为负数只会导致元素往左边移动，margin-top为负数是往上移动，而margin-bottom会改变元素的逻辑大小，使得后面的元素可能会覆盖元素自身(但是不会覆盖元素的border);margin-right也仅仅是修改元素的右边界，使得后续的元素可能覆盖元素自身!