【質(zhì)問(wèn)阿里】既然「圣杯布局」有缺陷為什么要設(shè)計(jì)「雙飛翼布局」而不是使用絕對(duì)定位

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

因?yàn)椤甘ケ季帧勾嬖趯挾冗^(guò)小導(dǎo)致布局混亂的缺陷（如下圖），阿里淘寶提出了「雙飛翼布局」

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

但是「雙飛翼布局」增加了 DOM 樹(shù)的層級(jí)，因此也會(huì)增加瀏覽器渲染引擎構(gòu)建布局樹(shù)時(shí)的計(jì)算消耗，來(lái)看一下「雙飛翼布局」的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>

個(gè)人任務(wù)，絕對(duì)定位即可解決此問(wèn)題 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;
}