圣杯布局和双飞翼布局

圣杯布局和双飞翼布局都属于三列布局，实现两边宽度固定，中间宽度自适应的效果。

布局实现效果：

具有header和footer，中间为内容区content
内容区为三列布局：left、middle、right
三列布局中，先加载middle内容

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            /* body最小宽度 = left * 2 + right */
            min-width: 600px;
        }
        #header,#footer{
            width: 100%;
            height: 50px;
            background: grey;
        }
        #content{
            /* 因为三列布局中，三列都设置浮动，所以开启BFC，解决高度塌陷 */
            overflow: hidden; 
            /* 圣杯布局与双飞翼布局区别 
               圣杯布局使用 padding 使left和right显示在middle两侧，且不遮挡middle */
            padding: 0 200px;
        }
        #middle{
            float: left;
            width: 100%;
            height: 200px;
            background: green;
        }
        #left,#right{
            float: left;
            width: 200px;
            height: 200px;
            background: pink;
        }
        #left{
            /* 使left位于middle左侧 */
            margin-left: -100%;
            /* 使left不遮挡middle */
            position: relative;
            left: -200px;
        }
        #right{
            /* 使right位于middle右侧 */
            margin-left: -200px;
            /* 使right不遮挡middle */
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="header">
        header
    </div>
    <div id="content">
        <div id="middle">
            middle
        </div>
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
    <div id="footer">
        footer
    </div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 600px;
        }
        #header,#footer{
            width: 100%;
            height: 50px;
            background: grey;
        }
        #content{
            overflow: hidden;
        }
        #content_inner{
            /* 圣杯布局和双飞翼布局区别
               双飞翼布局在content内添加一个大div，为它设置margin */
            margin: 0 200px;
        }
        #middle{
            float: left;
            width: 100%;
            height: 200px;
            background: green;
        }
        #left,#right{
            float: left;
            width: 200px;
            height: 200px;
            background: pink;
        }
        #left{
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        #right{
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="header">
        header
    </div>
    <div id="content">
        <div id="content_inner">
            <div id="middle">
                middle
            </div>
            <div id="left">
                left
            </div>
            <div id="right">
                right
            </div>
        </div>
    </div>
    <div id="footer">
        footer
    </div>
</body>
</html>

圣杯布局和双飞翼布局比较

两种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相似之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处，在于如何处理中间主列的位置：
- 圣杯布局是利用父容器的左、右内边距+定位
- 双飞翼布局是把主列嵌套在div后利用主列的左、右外边距+定位