我们先来看一下效果图：

一般的许多页面（淘宝，腾讯）都会用到这种布局。

下面来给大家介绍两种方法并且比较他们的不同。（在看这个之前你必须了解浮动，相对定位，清除浮动）

一.圣杯布局

首先来看一下HTML的代码：

重要的是中间container那个div，下面来解释一下。

header和footer是首行和角标，两个独立的div。

container里面设置三个div分别是main,left,right,至于为什么main不设置在left和right中间下面讲到定位的时候会讲到。

接下来我们一步一步来看css的代码，先注释掉header和footer方便与讲中间三栏式布局：

第一步，设置设置高度和左浮动，代码如图：

效果如下： （第二步）接下来设置container的内边距，代码： （第三部）设置宽度，代码: 效果如下： main设置为100%，占据整个container的div宽度，以便于自适应，

（第四步）接下来利用margin的负值让left和right浮动到上一行去，代码：

效果如下：

你会发现中间的main被遮住了，（第五步）那么这首container的padding就起作用了，利用position：relative，定位，代码：

效果如下：

下来打开header和footer的注释，并为footer设置清除浮动（clear：both），（因为container他用了float：left属性，脱离了文档流，不清楚footer的浮动，将盖住上面div)代码如下：

下面粘贴一段完整代码：

二.双飞翼布局

首先还是来看一下HTML代码：

可以注意到，这的main div比圣杯多了一个空的div

下面看似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，在属性使用上比圣杯布局简单了很多 。