大家都知道，「圣杯布局」和「雙飛翼布局」都是為了解決經(jīng)典三欄問題的優(yōu)化方案，

因為「圣杯布局」存在寬度過小導致布局混亂的缺陷（如下圖），阿里淘寶提出了「雙飛翼布局」

以下是兩個demo
「圣杯布局」：https://jsfiddle.net/zwwill/p...
「雙飛翼布局」：https://jsfiddle.net/zwwill/5...

但是「雙飛翼布局」增加了 DOM 樹的層級，因此也會增加 瀏覽器渲染引擎構(gòu)建布局樹時的計算消耗，來看一下「雙飛翼布局」的dom部分

<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">
            <div class="main-wrap">main</div>
        </div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>

個人任務，絕對定位即可解決此問題 https://jsfiddle.net/zwwill/a...
如下：

    <div class="header">header</div>
    <div class="wrapper">
        <div class="main col">
            main
        </div>
        <div class="left col">
            left
        </div>
        <div class="right col">
            right
        </div>
    </div>
    <div class="footer">footer</div>

.wrapper {
  position: relative; 
}
.main {
  margin:0 100px;
}
.left {
 position: absolute;
 left: 0;
 top: 0;
}
.right {
 position: absolute;
 right: 0;
 top: 0;
}

所以，請問

既然「圣杯布局」有缺陷為什么要設計「雙飛翼布局」而不是使用絕對定位