圣杯布局
三者都设置向左浮动。
设置中间的宽度为100％。
设置负边距margin-left。左部分设置-100％,.右部分设置-width px。
设置容器的padding值给左右两部分留出空间。
设置左右部分为相对定位。左部分left的为-width，右部分right为-width。
HTML
<div id="container">
<!--先写中间部分-->
<div id="main" class="col"></div>
<div id="left" class="col"></div>
<div id="right" class="col"></div>
</div>
主体main放置在最前面可以优先加载。
CSS
body {min-width: 550px;}
.col {position: relative;float: left;}
#container {padding: 0 190px 0 190px;}
#main {width: 100%;height: 400px;background-color: #ccc;}
#left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}
#right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}
圣杯布局有个问题，当面板的中间部分比两边的子面板宽度小的时候，布局就会乱掉。
双飞翼布局
HTML
<div id="container">
<div id="main" class="col">
<div id="main-wrap"></div>
</div>
<div id="left" class="col"></div>
<div id="right" class="col"></div>
</div>
与圣杯布局相比，双飞翼HTML中为main添加了一个子元素main-wrap,这个小小的改动是为了之后处理main中内容被遮盖的问题，这也是两者实现方式最大的不同点。
CSS
body {min-width: 550px;}
.col {float: left;}
#main {width: 100%;height: 400px;background-color: #ccc;}
#main-wrap {margin: 0 190px 0 190px;}
#left {width: 190px;height: 400px;margin-left: -100%;background-color: #0000FF;}
#right {width: 190px;height: 400px;margin-left: -190px;background-color: #FF0000;}
与圣杯布局一样，一开始三个col都设置float: left,为了把left和right定位到左右部分，采用负边距，left部分margin-left: -100%，right部分margin-right: -190px。
之后就是处理main中内容的遮盖问题，只需设置main-wrap的左右外边距即可解决。
相比圣杯布局，双飞翼不必设置左右栏的position: relative，也不必设置左右left、right值，只需#main多添加一个子元素包含，相应的padding换成margin。总的说来简单不少。
双飞翼布局的好处：
主要的内容先加载的优化；
兼容目前所有的主流浏览器，包括IE6在内；（就一个针对ie6的清除浮动hack:_zoom: 1;）
实现不同的布局方式，可以通过调整相关CSS属性即可实现。（可搭配实现一套栅格化布局系统）
栅格化布局
简单点说就是：像ps中的参考线一样，用若干水平参考线和垂直参考线将画布(网页)分割成若干份以便于布局排版。当然这个水平参考线和垂直参考线并不是随便拉的而是有规律的。
标准的栅格化公式
W = c * n + g * (n - 1) + 2 * m
在实际操作过程中，我们会省略掉最左边和最右边的那两个外边距，也就是说w1的宽度才是总宽度。
w1=(c + g) * n - g
写模板与是有讲究的，为了尽可能减少代码且发挥代码最大的公用性，我们可以使用父级控制子级。每次布局结构不同时，我们只修改父级样式名就可以实现布局变换。
如果我们要求布局如下：
回到前面的公式中，我们套用下公式可得出：190=(c+10)n-10，化简后：200=(c+10)n此时，c和n是未知的，所以可以有推算出几种组合(注意：n是正整数！)。
例：c=190,n=1、c=90,n=2、c=40,n=4、c=30,n=5、c=15,n=8等。如果让c=30，此时父级样式名为：grid-c2-m0s5，如果让c=40，此时父级样式名为：grid-c2-m0s4。
这个要看个人喜好了，如果习惯c=30。有了父级样式后，我们来改造下css样式即可实现灵活布局了。
html：
<div class="col grid-c2-m0s1 clearfix">
<div class="col-main">
<div class="main-wrap">grid-c2-m0s1</div>
</div>
<div class="col-sub">sub=30</div>
</div> css：
双飞翼：
.col-main{float:left;width:100%;height:50px;}
.main-wrap{background:#666;height:100%}
.col-sub{float:left;height:50px;background:#ccc;} 栅格：
/*两列 左主右侧*/
.grid-c2-m0s1{}
.grid-c2-m0s1 .main-wrap{margin-right:40px}
.grid-c2-m0s1 .col-sub{width:30px;margin-left:-30px}
有了这些模板库后，当我们页面布局需要变动时直接修改父级class即可实现对应布局
