margin-left:當(dāng)元素不存在width屬性或者（width：auto）的時(shí)候疗隶，負(fù)margin會(huì)增加元素的寬度;當(dāng)元素的width屬性一定的時(shí)候锨亏，負(fù)margin會(huì)使元素左移。
margin-top:為負(fù)值不會(huì)增加高度胖翰，只會(huì)產(chǎn)生向上位移
margin-bottom:為負(fù)值不會(huì)產(chǎn)生位移辜御，會(huì)減少自身的供css讀取的高度
想要?jiǎng)?chuàng)建上圖中黑框內(nèi)的幾個(gè)元素按順序排下來灭美，中間帶些間隔的布局要怎么做？
一般情況下养盗，我們會(huì)把黑框里面的子元素向左浮動(dòng)缚陷，然后設(shè)一個(gè)合適的margin-right,是不是就辦到了呢？不能爪瓜，因?yàn)橥膺吅诳虻膶挾仁枪潭ǖ牡旁荆褪抢锩嫠膫€(gè)子元素的寬度加上三列間隔的寬度，所以靠近右邊邊界的子元素就不應(yīng)該有正向的margin-right了铆铆，否則這一行就只能容納三個(gè)子元素了蝶缀。如下圖：
有人說那這還不簡(jiǎn)單，給靠近右邊界的那些子元素加一個(gè)class薄货，把它的margin-right設(shè)為0不就行了翁都。這當(dāng)然可以，但如果這些子元素是在模板中通過循環(huán)動(dòng)態(tài)輸出的谅猾，那在循環(huán)的時(shí)候還得判斷哪些子元素是靠近右邊邊界的柄慰，如果是就加上一個(gè)class。這樣做的話是不是就有點(diǎn)麻煩了税娜？
所以解決辦法是加大子元素的父容器的寬度坐搔，讓它能夠容納一行中有四個(gè)子元素加上四列間隔的寬度，然后最外面的的黑框的那個(gè)容器設(shè)一個(gè)overflow:hidden就行了敬矩，為什么呢概行？因?yàn)閛verflow截取的寬度是不包括負(fù)偏移的，因?yàn)楦溉萜鞯母叨仍赾ss看來是不包括偏移量的弧岳，也就是說此時(shí)文檔流向右偏移了margin-right的值凳忙，那么文檔流的實(shí)際內(nèi)容寬度就縮短了margin-right這么多业踏。
再仔細(xì)說一遍，其實(shí)就是負(fù)的邊距好像能減小元素在文檔流中的尺寸一樣涧卵，但事實(shí)上勤家，它的尺寸大小并沒變，只是文檔流在計(jì)算元素位置的時(shí)候柳恐，會(huì)認(rèn)為負(fù)邊距把元素的尺寸減小了伐脖，因?yàn)槲恢靡簿桶l(fā)生變化了。這只是打個(gè)很形象的比喻胎撤，幫助大家理解一下晓殊。還要注意的是，文檔流只能是后面的流向前面的伤提，即文檔流只能向左或向上流動(dòng)巫俺，不能向下或向右移動(dòng)。
比如肿男，一個(gè)沒有設(shè)定高度的塊狀元素介汹，其高度是自動(dòng)的，具體來說就是由它里面的文檔流最后的位置決定的舶沛。假設(shè)它里面有一個(gè)出于文檔流中的子元素嘹承，高度為100px;那這時(shí)這個(gè)父元素的高度就等于子元素的高度100px了，如果子元素繼續(xù)增高如庭，那么父元素也會(huì)跟著增高叹卷。可是如果這時(shí)子元素設(shè)一個(gè)負(fù)的margin-bottom,比如-20px坪它，因?yàn)樨?fù)邊距會(huì)影響到文檔流骤竹，本來文檔流的高度是從父元素的最頂端到子元素的最底端這段高度，現(xiàn)在子元素有一個(gè)margin-bottom:-20px;就相當(dāng)于文檔流要向上退后20px,這樣整個(gè)文檔流的高度就減少了20px了往毡，那么父元素的高度也會(huì)跟著減少20px蒙揣。在IE8+以及那些標(biāo)準(zhǔn)瀏覽器中，這還需要父元素?fù)碛幸粋€(gè)overflow:hidden的屬性开瞭，因?yàn)楦冈氐母叨茸兞死琳穑釉氐母叨炔]有變，所以需要使子元素超出隱藏嗤详，但即使不設(shè)置overflow:hidden个扰，父元素的高度也是變小了的，只不過這時(shí)子元素的高度會(huì)超出父元素葱色。在IE6中則不需要锨匆，但需要觸發(fā)它的hasLayout屬性。
上面說了負(fù)的左右邊距能加大元素的寬度，所以給子元素的父容器設(shè)一個(gè)合適的負(fù)的margin-right就可以了恐锣。
當(dāng)然你也可以直接在css中把子元素的父容器的寬度設(shè)寬一些，舉這個(gè)例子只是為了說明負(fù)邊距也是一種方法舞痰⊥亮瘢看下完整的代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body,ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
.container{ height:210px; width:460px; border:5px solid #000;}
ul{ height:210px; overflow:hidden; margin-right:-20px;}/*一個(gè)負(fù)的margin-right,相當(dāng)于把ul的寬度增加了20px*/
li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;}
</style>
</head>
<body>
<div class="container">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
<li>子元素7</li>
<li>子元素8</li>
</ul>
</body>
</html>
雙飛翼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container {
width:100%;/*100%才行，不能寫死固定數(shù)據(jù)*/
margin: 0 auto;
overflow:hidden;
float:left;
}
#main-content {
background:gray;
margin-left:200px; /*與left產(chǎn)生10像素間隔*/
margin-right:200px; /*與right產(chǎn)生10像素間隔*/
}
#left {
float:left; /*在container右側(cè)浮動(dòng)响牛，即緊跟container右側(cè)*/
width:190px;
background:red;
margin-left:-100%; /*在container右側(cè)浮動(dòng)玷禽，即緊跟container右側(cè)，然后再左側(cè)偏移父元素的寬度*/
}
#right {
float:left;
width:190px;
background:green;
margin-left:-190px; /*在container右側(cè)浮動(dòng)呀打，即緊跟container右側(cè)矢赁，然后再左側(cè)偏移自身元素的寬度*/
}
</style>
</head>
<body>
<div id ="container">
<div id="main-content">main content</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</body>
</html>
雙飛翼布局，為了中間div內(nèi)容不被遮擋贬丛，直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容撩银，在該子div里用margin-left和margin-right為左右兩欄div留出位置。
如果代碼如下：
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container {
/* width:100%;100%才行豺憔，不能寫死固定數(shù)據(jù)*/
margin: 0 auto;
overflow:hidden;
float:left;
}
#main-content {
background:gray;
/* margin-left:200px; 與left產(chǎn)生10像素間隔*/
/* margin-right:200px; 與right產(chǎn)生10像素間隔*/
}
#left {
float:left; /*在container右側(cè)浮動(dòng)额获，即緊跟container右側(cè)*/
width:190px;
background:red;
/* margin-left:-100%; 在container右側(cè)浮動(dòng)，即緊跟container右側(cè)恭应，然后再左側(cè)偏移父元素的寬度*/
}
#right {
float:left;
width:190px;
background:green;
/* margin-left:-190px; 在container右側(cè)浮動(dòng)抄邀，即緊跟container右側(cè)，然后再左側(cè)偏移自身元素的寬度*/
}
</style>
</head>
<body>
<div id ="container">
<div id="main-content">main content</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</body>
</html>
則出現(xiàn)效果圖:
下面分別解釋注釋掉的每一句：
1昼榛、
#container {
/* width:100%;100%才行境肾，不能寫死固定數(shù)據(jù)*/
margin: 0 auto;
overflow:hidden;
float:left;
}
如果不設(shè)置最外層容器的寬度，float:left屬性會(huì)使最外層容器收縮到只包含容器內(nèi)元素為止胆屿。如果寫死固定數(shù)據(jù)則針對(duì)不同大小的瀏覽器界面顯示會(huì)有問題奥喻。
2、
#main-content {
background:gray;
/* margin-left:200px; 與left產(chǎn)生10像素間隔*/
/* margin-right:200px; 與right產(chǎn)生10像素間隔*/
}
為左右兩側(cè)div留出顯示位置莺掠。
3衫嵌、
#left {
float:left; /*在container右側(cè)浮動(dòng)，即緊跟container右側(cè)*/
width:190px;
background:red;
/* margin-left:-100%; 在container右側(cè)浮動(dòng)彻秆，即緊跟container右側(cè)楔绞，然后再左側(cè)偏移父元素的寬度*/
}
本文第一句話：當(dāng)元素的width屬性一定的時(shí)候酒朵，負(fù)margin會(huì)使元素左移。本例中就是left元素會(huì)左移到緊貼父元素container的左側(cè)扎附。
4蔫耽、
#right {
float:left;
width:190px;
background:green;
/* margin-left:-190px; 在container右側(cè)浮動(dòng)，即緊跟container右側(cè)，然后再左側(cè)偏移自身元素的寬度*/
}
同理匙铡，right元素只需要左移自身元素的位置图甜，使自己的最右邊挨著父元素container的右側(cè)即可。
雙飛翼布局主要解決倆問題：1鳖眼、三列布局黑毅，中間寬度自適應(yīng)，兩邊定寬钦讳； 2矿瘦、中間欄要在瀏覽器中優(yōu)先展示渲染。
