圣杯布局与双飞翼布局的优点：利用布局，可优先渲染主要部分

不同点：

圣杯布局：借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，同一个杯子，非主要元素其只是占据了全部容器的padding值部分；

双飞翼布局：给主要部分main-wrap添加一个外层元素main，其他非主要元素所占据的空间是主要部分(main-wrap)的margin空间，像鸟的两个翅膀，与主要部分main脱离(main和main-wrap是下面双飞翼布局的元素id)。

圣杯布局

    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
            <style type="text/css">   
            .wrapper {  
                padding: 0 100px; 
                overflow:hidden;  
            }  
            .col {  
                position: relative;   
                float: left;  
            }  
            .main {  
                width: 100%;  
                height: 200px;  
                background:yellow;  
            }  
            .left,.right {  
                width: 100px;   
                height: 200px;   
                background:red;  
            }  
            .left{ 
                margin-left: -100%;  
                left: -100px;  
            }  
            .right {  
                margin-left: -100px;   
                right: -100px;  
            }  
              
            </style>  
        </head>  
        <body>  
            <section class="wrapper">  
                <section class="col main">main</section> 
                <aside class="col left">left</aside>  
                <aside class="col right">right</aside>  
            </section>  
        </body>  
    </html>

圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。

双飞翼布局

目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。

缺点是：多加了一层dom节点

    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
            <style type="text/css">  
                body {min-width: 550px;}  
                .col {float: left;}           
                #main {  
                    width: 100%;  
                    height: 200px;  
                    background-color: #ccc;  
                }             
                #main-wrap {  
                    margin: 0 190px;/*这是圣杯和双飞翼最明显的区别，在main内部使用的是margin，而圣杯是直接在container部分使用padding*/          
                }  
                #left,#right {  
                    width: 190px;  
                    height: 200px;  
                    background-color: #0000FF;  
                }     
                #left{  
                    margin-left: -100%; 
                }         
                #right {  
                    margin-left: -190px;
                    background-color: #FF0000;  
                }  
            </style>  
        </head>  
        <body>  
            <div id="container">  
                <div id="main" class="col">  
                    <div id="main-wrap"> #main </div>  
                </div>  
                <div id="left" class="col">#left</div>  
                <div id="right" class="col">#right</div>  
            </div>  
        </body>  
    </html>

像这样的布局，也可以使用定位完成

定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            header,footer { height: 50px;background:#ccc;}
            .wrapper { position: relative;}
            .main { height: 200px; margin:0 100px;background:blue;}
            .left, .right{ width: 100px; height: 200px; position: absolute; top: 0;background:red;}
            .left{ left: 0;}
            .right{ right: 0;}
            
        </style>
    </head>
    <body>
        <header>header</header>
        <section class="wrapper">
            <section class="col main">main</section>
            <aside class="col left">left</aside>
            <aside class="col right">right</aside>
        </section>
        <footer>footer</footer>
    </body>
</html>

运行结果为：