圣杯布局是討論「三欄液態(tài)布局」的實現(xiàn)缴饭，它最早出自于誰或許不得而查了幕垦，但最早的完美實現(xiàn)是來自于 Matthew Levine 于2006年在「A LIST APART」上寫的一篇文章盏道，它主要講述了網(wǎng)頁中關(guān)于最佳圣杯的實現(xiàn)方法猜嘱。
所謂液態(tài)布局是相對固態(tài)布局而言的衅枫，固態(tài)布局就是固定值不變的布局，液態(tài)就好比在容器里到了一杯水朗伶，它可以隨著容器寬度的變化而自適應寬度弦撩。
接下來一起動手來實現(xiàn)一個圣杯布局
第一步：建立框架，并加入三欄
<header id="head">我是頭部</header>
<div id="container">
<div id="center">我在中間</div>//中間欄優(yōu)先渲染论皆，所以放兩邊欄前邊
<div id="left">我在左邊</div>
<div id="right">我在右邊</div>
</div>
<footer id="foot">我是尾部</footer>
接著我們給每一欄配上合適的寬度益楼，并將它們設(shè)為浮動。同時我們需要清除 footer 的上下環(huán)境点晴，以免遭跟上面三欄一起浮動感凤。
#container{
height: 200px;
}
#center{
width: 100%;
float: left;
height: 200px;
}
#left{
width: 200px;
float: left;
height: 200px;
}
#right{
width: 202px;
float: left;
height: 200px;
}
#foot{
clear: both;
}
注意：
- 這里中間一欄的 100% 寬是基于它的父容器
container的寬度而言的。 -
左右兩欄由于排在中間欄的后面粒督，且因為空間不夠被擠到了中間欄的下面陪竿，如下圖所示：
第一步.png
第二步：把左右側(cè)欄放上去。（利用負邊距布局）
#left{
margin-left: -100%;
}
#right{
margin-left: -202px;
}
首先屠橄，我們先將它的外邊距設(shè)置為-100%族跛，這樣一來，由于浮動的關(guān)系锐墙，左側(cè)欄就能上位礁哄，與中間欄交疊在一起，并占據(jù)了左邊溪北。而右側(cè)欄由于左側(cè)欄的上位桐绒，自動向前浮動到了原來左側(cè)欄的位置夺脾。
然后，我們需要把右側(cè)欄放上去掏膏，此時只需利用上面的原理把他放到 container的右外邊距的位置即可劳翰，我們需要再一次設(shè)置一個負外邊距的值，它等于右側(cè)欄的寬度馒疹。效果如下：
注意：中間欄的文字被覆蓋了。
第三部：設(shè)置container容器的左右邊距值分別為左右欄的寬乙墙。
#container{
padding: 0 202px 0 200px;
}
效果圖如下：
第四步：給左右兩個盒子加一個定位颖变，加了定位之后左右兩個盒子就可以設(shè)置left和right值。
#left{
position: relative;
left: -200px;
}
#right{
position: relative;
right: -202px;
}
效果圖如下：
當縮放瀏覽器時(頁面有一個最小縮小值听想，為了安全起見腥刹，最好還是給body加一個最小寬度!)，中間欄的寬度自適應汉买，兩邊欄的寬度固定不變衔峰。
如下圖：
到此為止，我們已經(jīng)實現(xiàn)了一個圣杯布局了蛙粘。
