一、margin為負值產生的影響
對于自身的影響
當元素不存在width屬性或者（width：auto）的時候，負margin會增加元素的寬度。
<div class="container">
<div class="box1">
I dont have the width
</div>
</div>
.container{
margin:0 auto;
width: 500px;
border: 1px #ccc solid;
margin-bottom: 20px;
background-color: pink;
}
.box1{
margin-left: -20px;
}
可以看到box1增加了20px寬度，margin-left和margin-right都是可以增加寬度。
注意：
margin-top為負值不會增加高度，只會產生向上位移
margin-bottom為負值不會產生位移，會減少自身的供css讀取的高度
什么是供css讀取的高度？
<style>
#box {
width: 50%;
margin-bottom: -25px;
background-color: rgba(90, 243, 151, 0.8);
height: 50px;
}
</style>
<div id="box">
box
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script>
var x = $('#box').height()
console.log(x);
</script>
對文檔流的影響
元素如果用了margin-left:-20px;毋庸置疑的自身會向左偏移20px和定位（position：relative）有點不一樣的是，在其后面的元素會補位，也就是后面的行內元素會緊貼在此元素的之后。總結，不脫離文檔流不使用float的話，負margin元素是不會破壞頁面的文檔流。
對浮動元素的影響
定義3個box
<div class="container">
<div class="flb flbox1">box1</div>
<div class="flb flbox2">box2</div>
<div class="flb flbox3">box3</div>
</div>
.flb{
float: left;
width: 100px;
height: 100px;
}
.flbox1{background-color: rgba(33, 114, 214, 0.8);}
.flbox2{background-color: rgba(255, 82, 0, 0.8);}
.flbox3{background-color: rgba(90, 243, 151, 0.8);}
加上margin-left:-25px;
.flb{
float: left;
width: 100px;
height: 100px;
margin-left: -25px;
}
.flbox1{background-color: rgba(33, 114, 214, 0.8);}
.flbox2{background-color: rgba(255, 82, 0, 0.8);}
.flbox3{background-color: rgba(90, 243, 151, 0.8);}
可以看出3個盒子都向左移動25px；
box1自身向左移動了25px，box2又覆蓋了其25px，所以我們就看到了“寬度”為50px的box1，box2，box3以此類推。
負margin會改變浮動元素的顯示位置。
對絕對定位影響
<div class="absolute"></div>
.absolute{
position: absolute;
top:50%;
left:50%;
height: 200px;
width: 200px;
background-color: #ccc;
margin-top: -100px;
margin-left: -100px;
}
對于絕對定位元素，負margin會基于其絕對定位坐標再偏移
二、margin為負值的常見布局應用
左右固定，中間自適應（雙飛翼）
雙飛翼的好處：
1.可以讓主要內容出現在dom結構的前面，現將主要內容渲染
2.中間只適應，兩邊固定寬度的效果
<div class="main">
<div class="main-content">main content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
*{
margin:0;
padding: 0
}
.main{
float: left;
width: 100%;
}
.main .main-content{
margin: 0 210px;
background-color: rgba(33, 114, 214, 0.8);
height: 500px
}
.left{
width: 200px;
float: left;
background-color: rgba(255, 82, 0, 0.8);
margin-left: -100%;
height: 200px
}
.right{
width: 200px;
height: 200px;
margin-left: -200px;
float: left;
background-color: rgba(90, 243, 151, 0.8);
}
去除列表最后一個li元素的border-bottom
很多情況下，我們會用li標簽來模擬表格，再給li標簽添加下邊距的時候，最后一個li標簽表格會和父元素的邊框靠在一起，會顯得整個“table”的底部邊框會比其他的邊粗一些！
<style>
ul.table{
border:1px #ccc solid;
margin-top:100px;
}
ul.table li{
border-bottom: 1px #ccc solid;
list-style: none;
}
</style>
<ul class="table">
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
</ul>
下面添加一個margin-bottom:-1px;的屬性,就可以使其看起來更完美。
<style>
ul.table{
border:1px #ccc solid;
margin-top:100px;
}
ul.table li{
border-bottom: 1px #ccc solid;
list-style: none;
margin-bottom: -1px;
}
</style>
<ul class="table">
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
</ul>
多列等高
<style>
.container{
margin:0 auto;
width: 100%;
overflow: hidden;
}
.left{
height: 50px;
width: 33.33%;
margin-bottom: -5000px;
padding-bottom: 5000px;
float: left;
background-color: rgba(33, 114, 214, 0.8);
}
.main{
height:100px;
margin-bottom: -5000px;
width: 33.33%;
float: left;
padding-bottom: 5000px;
background-color: rgba(255, 82, 0, 0.8);
}
.right{
width: 33.33%;
float: left;
margin-bottom: -5000px;
padding-bottom: 5000px;
background-color: rgba(90, 243, 151, 0.8)
}
</style>
<div class="container">
<div class="left"> height:50px</div>
<div class="main">height:100px</div>
<div class="right">height:30px</div>
</div>
雖然設置了5000的內邊距，但是我用－5000的外邊距去抵消掉，所以對于父元素來說（上文所說的css能讀取的高度），他還是原來的高度（但其自身實際高度為5000p x+本來高度），然后父元素在加上overflow:hidden;以最高的高度進行裁切，所以就有了看起來“等高”的3個div。
