雙飛翼布局與聖杯布局
一、聖杯設計思路：
DOM結構：
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
思路：
1.將div.container通過padding來設置左右的空閑位置來讓左右欄占據，所以設置padding-left為左欄寬度，padding-right為右欄寬度。
2.讓三個元素統一左浮動，從左到右開始順序為main,left,right。
3.然後設置div.main的寬度為100%，讓它占據container的一行內容。
4.設置左欄的margin-left為-100%，右欄margin-left為其width的負值，這樣左欄和右欄就會分別在main的左右兩邊
5.設置左右欄為相對定位，然後將左右欄定位到左右的空白處
聖杯布局
參考代碼：
二、雙飛翼布局設計思路：
DOM結構：
<div>
<div class="main">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<div/>
思路：
與聖杯布局相類似，但因為雙飛翼布局，采取了div.main中嵌套一個div.content，因此，利用div.content設置margin，來讓左右兩邊騰出位子來讓左右欄，就不需要使用相對定位了：
1.設置div.main的寬度為100%，讓它占據container的一行內容。
2.讓三個元素統一左浮動，從左到右開始順序為main,left,right。
3.設置左欄的margin-left為-100%，右欄margin-left為其width的負值，這樣左欄和右欄就會分別在main的左右兩邊
4.div.content設置margin，來讓左右兩邊騰出位子來讓左右欄占據。
參考代碼：
雙飛翼布局與聖杯布局