雙飛翼佈局是一種比較靈活的佈局，始於淘寶UED，玉伯提出的，當然他着重介紹的是雙飛翼柵格佈局。
本文着重講解常用三欄佈局。通俗一點講，可以把三欄比作一隻鳥，main部分相當是於鳥的身體，而left與right就是鳥的“翼”了，鳥想要平衡地飛翔就要把主體位置給擺正確，然後在“翼”的作用下開始起飛。佈局也是一樣的，我們也要先把主體給擺好，然後再合理地調整雙翼，這樣整體動作纔會比較和諧。
爲了快速加載主體內容，我們在佈局時候可以把最重要的放在最前面。比如：
<div class="wrap">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
實現要求：主間部分內容的寬度是要自適應的，左、右兩邊寬度分別爲20%，30%
首先呢，我們需要把這三列都浮動起來，即：
.main,.left,.right { float:left; height:200px; }
說明：這裏的高度是我自己設置的，在實際佈局中可以根據需要來定，他們可以任意設置自己的高度。
主體main的寬度要自適應，那麼可以先設置爲100%，然後隨便上個背景色與”翼“做區分
.main { width:100%; background:#ace; }
接下來便是”翼“的設置了
左邊：
.left { width:20%; background:#eee; }
右邊：
.right { width:30%; background:#ddd; }
基本樣式已設置完成，但預覽頁面你會發現並沒有達到預期的效果。。。
那麼接下來，我們應該怎麼做呢？
大家可以回想一下margin的用法，對於其負值有很奇妙的用法（這裏不多做說明，文章最後我會推薦一些相關文章，感興趣的童鞋可以看看），而在這裏，關鍵也是運用margin負值才得以實現效果。
回到題目中，想要left居左，那麼我們可以設置 margin-left:-100%; 即：
.left { width:20%; background:#eee; margin-left:-100%; }
說明：這裏的100%爲main的寬度，相當於是把left給左移了，剛好實現左邊與main的對齊。
對於right居右問題，也是類似可以設置margin-left:30%; 即：
.right { width:30%; background:#ddd; margin-left:-30%; }
說明：這裏的30%爲right自身的寬度，相當於是自己向左移了自身的一個寬度，剛好實現右邊與main的對齊。
這時，整個佈局看起來像是完成了，其實還剩關鍵的一步，即main的位置該如何設置？目前，他的左邊及右邊部分元素是會被left/right擋住的，所以我們還必須在main裏面再添加一個div(class="mainIn")，設置margin:0 30% 0 20%;，把兩邊內容給擠開，這樣纔是完美的效果。
轉自：http://www.cnblogs.com/front-end/archive/2012/08/29/zq_0406.html