我们先来看一下效果图：
下面来给大家介绍两种方法并且比较他们的不同。（在看这个之前你必须了解浮动，相对定位，清除浮动）
一.圣杯布局
首先来看一下HTML的代码：
header和footer是首行和角标，两个独立的div。
container里面设置三个div分别是main,left,right,至于为什么main不设置在left和right中间下面讲到定位的时候会讲到。
接下来我们一步一步来看css的代码，先注释掉header和footer方便与讲中间三栏式布局：
第一步，设置设置高度和左浮动，代码如图：
（第四步）接下来利用margin的负值让left和right浮动到上一行去，代码：
你会发现中间的main被遮住了，（第五步）那么这首container的padding就起作用了，利用position：relative，定位，代码：
下来打开header和footer的注释，并为footer设置清除浮动（clear：both），（因为container他用了float：left属性，脱离了文档流，不清楚footer的浮动，将盖住上面div)代码如下：
下面粘贴一段完整代码：
二.双飞翼布局
首先还是来看一下HTML代码：
下面看似css代码来解释：双飞翼代码和圣杯第一步是一样的，设置左浮动，没有第二步，双飞翼之所以main中设置一个空的div就是这个原因，不用container的内边距，用空div的外边距，就是设置main-in的margin值，（margin-left和margin-right）下来圣杯第三部设置宽度，第四步也相同，margin的负值，这样就完成啦。看一下main-in的css代码：
来看一下完整代码：
三.区别
需要说明的是圣杯布局用到了container的padding，和position：relative，而双飞翼布局没有用padding他是给HTML设置了一个空的div从而利用它他外边距margin，并为他没有用positive，在属性使用上比圣杯布局简单了很多 。
