聖杯布局 和 雙飛翼布局 是重要布局方式。兩者的功能相同，都是為了實現一個兩側寬度固定，中間寬度自適應的三欄布局。
遵循了以下要點：
- 兩側寬度固定，中間寬度自適應
- 中間部分在DOM結構上優先，以便先行渲染
- 允許三列中的任意一列成為最高列
- 只需要使用一個額外的
<div>標簽
聖杯布局
1、結構：
1 <div id="header"></div>
2 <div id="container">
3 <div id="center" class="column"></div>
4 <div id="left" class="column"></div>
5 <div id="right" class="column"></div>
6 </div>
7 <div id="footer"></div>
2、CSS 樣式
（1）假設左側的固定寬度為200px，右側的固定寬度為150px，則首先在container上設置：
1 #container {
2 padding-left: 200px;
3 padding-right: 150px;
4 }
為左右兩列預留出相應的空間，得到如下示意圖：
（2）隨后分別為三列設置寬度與浮動，同時對footer設置清除浮動：
1 #container .column {
2 float: left;
3 }
4
5 #center {
6 width: 100%;
7 }
8
9 #left {
10 width: 200px;
11 }
12
13 #right {
14 width: 150px;
15 }
16
17 #footer {
18 clear: both;
19 }
得到如下效果：
根據浮動的特性，由於center的寬度為100%，即占據了第一行的所有空間，所以left和right被“擠”到了第二行。
(3) 接下來的工作是將left放置到之前預留出的位置上，這里使用負外邊距：
1 #left {
2 width: 200px;
3 margin-left: -100%;
4 }
得到：
（4）隨后還需要使用定位(position)方法：
1 #left {
2 width: 200px;
3 margin-left: -100%;
4 position: relative;
5 right: 200px;
6 }
這里使用position: relative和right: 200px將left的位置在原有位置基礎上左移200px，以完成left的放置：
（5）接下來放置right，只需添加一條聲明即可：
1 #right {
2 width: 150px;
3 margin-right: -150px;
4 }
最終效果圖：
left使用了position: relative，所以就意味着在center開始的區域，還存在着一個left的寬度。所以頁面的最小寬度應該設置為200+150+200=550px：
雙飛翼布局
1、結構
1 <body>
2 <div id="header"></div>
3 <div id="container" class="column">
4 <div id="center"></div>
5 </div>
6 <div id="left" class="column"></div>
7 <div id="right" class="column"></div>
8 <div id="footer"></div>
9 <body>
2、樣式
（1）與聖杯布局相同的思路，首先設置各列的寬度與浮動，並且為左右兩列預留出空間，以及為footer設置浮動清除：
1 #container {
2 width: 100%;
3 }
4
5 .column {
6 float: left;
7 }
8
9 #center {
10 margin-left: 200px;
11 margin-right: 150px;
12 }
13
14 #left {
15 width: 200px;
16 }
17
18 #right {
19 width: 150px;
20 }
21
22 #footer {
23 clear: both;
24 }
以上代碼將container,left,right設置為float: left，而在container內部，center由於沒有設置浮動，所以其寬度默認為container的100%寬度，通過對其設置margin-left和margin-right為左右兩列預留出了空間。
（2）將left放置到預留位置：
1 #left {
2 width: 200px;
3 margin-left: -100%;
4 }
（3）將right放置到預留位置：
1 #right {
2 width: 150px;
3 margin-left: -150px;
4 }
最后計算最小頁面寬度：由於雙飛翼布局沒有用到position:relative進行定位，所以最小頁面寬度應該為200+150=350px。但是當頁面寬度縮小到350px附近時，會擠占中間欄的寬度，使得其內容被右側欄覆蓋。
因此在設置最小頁面寬度時，應該適當增加一些寬度以供中間欄使用。
更多詳情，參考這篇文章：聖杯布局和雙飛翼布局