1.圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * { 
        margin: 0; 
        padding: 0; 
        text-align: center;
    }
    .header, .footer { 
        background-color: skyblue; 
        height: 60px; 
        line-height: 60px;
    }
    .container {
        overflow: hidden;
        padding: 0 100px;
    }
    .main { 
        width: 100%;
        background-color: rgba(255,0,0,0.5); 
        height: 100px; 
        line-height: 100px;
        float: left;
    }
    .left { 
        background-color: rgba(0,255,0,0.5);
        width: 100px; 
        height: 100px; 
        line-height: 100px; 
        float: left;
        margin-left: -100%;
        position: relative;
        left: -100px;
    }
    .right {
        background-color: pink; 
        width: 100px; 
        height: 100px; 
        line-height: 100px; 
        float: left;
        margin-left: -100px;
        position: relative;
        right: -100px;
    }
</style>
</head>
<body>
    <!-- 圣杯布局 -->
    <div class="header">header</div>
    <div class="container">   <!-- 利用左右内边距给左右两个盒子留位置，overflow清浮动 -->
        <div class="main">main</div>   <!-- 左浮，宽度100%，实现中间盒子自适应宽度 -->
        <div class="left">left</div>   <!-- 左浮，宽度100px，通过margin-left:-100%使自己处于跟main盒子一行，相对定位占据container内边距留出的左边位置 -->
        <div class="right">right</div>   <!-- 左浮，宽度100px，通过margin-left:-100px使自己处于跟main盒子一行，相对定位占据container内边距留出的右边位置 -->
    </div>
    <div class="footer">footer</div>
</body>
</html>

整体效果：

圣杯布局

2.双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * { 
        margin: 0; 
        padding: 0; 
        text-align: center;
    }
    .header, .footer { 
        background-color: skyblue; 
        height: 60px; 
        line-height: 60px;
    }
    .container {
        overflow: hidden;
    }
    .main { 
        width: 100%;
        background-color: rgba(255,0,0,0.5); 
        height: 100px; 
        line-height: 100px;
        float: left;
    }
    .inner-main {
        margin-left: 100px;
        margin-right: 100px;
    }
    .left { 
        background-color: rgba(0,255,0,0.5);
        width: 100px; 
        height: 100px; 
        line-height: 100px; 
        float: left;
        margin-left: -100%;
    }
    .right {
        background-color: pink; 
        width: 100px; 
        height: 100px; 
        line-height: 100px; 
        float: left;
        margin-left: -100px;
    }
</style>
</head>
<body>
    <!-- 双飞翼布局 -->
    <div class="header">header</div>
    <div class="container">   <!-- overflow清浮动 -->
        <div class="main">    <!-- 左浮，宽度100%，实现中间盒子自适应宽度 -->
            <div class="inner-main">main</div>    <!-- 使用margin来取消左右盒子移上来覆盖的地方 -->
        </div>   
        <div class="left">left</div>   <!-- 左浮，宽度100px，通过margin-left:-100%使自己处于跟main盒子一行 -->
        <div class="right">right</div>   <!-- 左浮，宽度100px，通过margin-left:-100px使自己处于跟main盒子一行 -->
    </div>
    <div class="footer">footer</div>
</body>
</html>

整体效果：

双飞翼布局

总结：

其实两种布局最终实现的效果是差不多的，主要是实现的思路有所不同：

圣杯布局通过设置 container 的 padding 来为左右栏留出位置，而双飞翼布局是在中间栏增加子元素，通过内层子元素的 margin 来为左右栏留出位置（注意：双飞翼布局中 width 和 float 属性都是设置在外层 div 上的）。
圣杯布局中为了使得左右栏分布在最左和最右需要同时使用负 margin 和相对定位实现，而双飞翼布局中不需要使用相对定位。