margin負值應用

我理解的最關鍵的一點是：

在文件流中，只能是後面的流向前面的，即文件流只能向左或向上流動，不能向下或向右移動。

第二個元素的基準線是第一個元素的右邊界，第三個元素的基準線是第一、二個元素排好後最右邊的邊界，第四個元素的基準線是第一、二個元素排好後最右邊的邊界、、、

拿一個聖盃佈局來說

html程式碼

<div id="three_columns">
<div class="middle">
<div class="content">中間主體區塊寬度自適應</div>
</div>
<div class="left">左列定寬200px</div>
<div class="right">右側定寬300px</div>
<div class="foot">底部</div>
</div>

css程式碼

#three_columns{width :800px ; height: 600px;margin:
10px auto;background: #ddd}
.middle,.left,.right {
height: 300px;
font: bolder 20px/300px '微軟雅黑';
color: #fff;
text-align: center;
}
.middle {
width: 100%;
float: left;
background: black;
}
.left {
width: 200px;
float: left;
margin-left: -100%;
background-color: red;
}
.right {
width: 300px;
float: left;
margin-left: -300px;
background-color: blue;
}
.foot{background: #ff0;height: 80px;clear:both;}

首先main在文件流中先輸出，寬度為父元素three_columns的寬度，然後輸出left，left以main的右邊的邊界定位，margin-left: -100%;就是讓left移動到它的左邊的邊界和main右邊的邊界重合。

然後輪到right，此時最右邊的邊界為main的右邊，設定right的margin-left: -300px;讓right相對於main的右邊左移300px。

那如果把right設為margin-left: -200px;呢？來看看效果

再來把right設為margin-left: -400px;呢？來看看效果

可以看出，當right左移的距離沒有超過自身寬度時它是隨著文件流被擠到了下方。當right左移的距離超過了自身寬度時，它被擠到了上方覆蓋了main。

擴充套件閱讀

聖盃、雙飛翼佈局