圣杯布局和雙飛翼布局的目的，都是左右兩欄固定寬度，中間部分自適應(yīng)。
示例目標(biāo)：左200px，右100px，中間自適應(yīng)，三部分高度一致。

雙飛翼布局

布局思路：中間是身體，兩邊是翅膀，先把重要的身體部分放好，然后再將翅膀移動(dòng)到適當(dāng)?shù)牡胤健?/p>

1. html代碼中，中間部分放前面，然后是左邊、右邊。
2. 將三部分都float:left
3. 中間部分，width:100%
4. main占滿了，左邊部分margin-left: -100%，右邊margin-left: -100px
5. 中間部分的左右被左邊部分和右邊部分覆蓋了，在中間增加個(gè)內(nèi)層，設(shè)置margin：0 100px 0 200px

圣杯布局

對(duì)應(yīng)上方雙飛翼布局：

1. 相同
2. float: left相同，加上position: relative
3. 相同
4. 相同
5. 中間部分加padding: 0 100px 0 200px，左右再處理。

CSS3布局

1. 左中右按順序放在html中，float: left，
2. 中間 width: calc(100% - 400px)