圣杯布局是讨论「三栏液态布局」的实现，它最早出自于谁或许不得而查了，但最早的完美实现是来自于 Matthew Levine 于2006年在「A LIST APART」上写的一篇文章，它主要讲述了网页中关于最佳圣杯的实现方法。
所谓液态布局是相对固态布局而言的，固态布局就是固定值不变的布局，液态就好比在容器里到了一杯水，它可以随着容器宽度的变化而自适应宽度。
接下来一起动手来实现一个圣杯布局
第一步：建立框架，并加入三栏
<header id="head">我是头部</header>
<div id="container">
<div id="center">我在中间</div>//中间栏优先渲染，所以放两边栏前边
<div id="left">我在左边</div>
<div id="right">我在右边</div>
</div>
<footer id="foot">我是尾部</footer>
接着我们给每一栏配上合适的宽度，并将它们设为浮动。同时我们需要清除 footer 的上下环境，以免遭跟上面三栏一起浮动。
#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
第二步：把左右侧栏放上去。（利用负边距布局）
#left{
margin-left: -100%;
}
#right{
margin-left: -202px;
}
首先，我们先将它的外边距设置为-100%，这样一来，由于浮动的关系，左侧栏就能上位，与中间栏交叠在一起，并占据了左边。而右侧栏由于左侧栏的上位，自动向前浮动到了原来左侧栏的位置。
然后，我们需要把右侧栏放上去，此时只需利用上面的原理把他放到 container的右外边距的位置即可，我们需要再一次设置一个负外边距的值，它等于右侧栏的宽度。效果如下：
2.png
注意：中间栏的文字被覆盖了。
第三部：设置container容器的左右边距值分别为左右栏的宽。
#container{
padding: 0 202px 0 200px;
}
效果图如下：
3.png
第四步：给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。
#left{
position: relative;
left: -200px;
}
#right{
position: relative;
right: -202px;
}
效果图如下：
4.png
当缩放浏览器时(页面有一个最小缩小值，为了安全起见，最好还是给body加一个最小宽度!)，中间栏的宽度自适应，两边栏的宽度固定不变。
如下图：
缩小浏览器效果图
到此为止，我们已经实现了一个圣杯布局了。
