今天，在一個論壇中無意看到了一同胞的回復，稱樓主的三列布局為“雙飛燕”布局，一開始很詫異，尋思了半天，真有這種布局么？不解與疑惑中，於是便去請教了度娘。然而，在百度中的解釋多數是關於下棋一方面的技術與技巧，我更疑惑了。。。
專業術語並非“無中生有”，既然有這個說法，我想必定會有他的來源與出處。於是，感覺告訴我要繼續。查看眾多資料，總算是皇天不負有心人，終於找到了關於布局“雙飛燕”的這么個說法。我暈，其實真正的術語並不叫“雙飛燕”，而是“雙飛翼”，估計是那哥們回帖的時候還在做夢吧……呵呵
開頭侃了半天，現在咱言歸正傳吧！
雙飛翼布局是一種比較靈活的布局，始於淘寶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%;，把兩邊內容給擠開，這樣才是完美的效果。
延伸：對於這種方法，同時也可以隨便調換他們的位置，你只需要控制他們的位移即可，都是成功的，這點大家可以做個嘗試。
大致思路是這樣的，本文就介紹到這里了。關於本文的參考資料及margin負值的更多用法，可以參考：
http://ued.taobao.com/blog/2008/11/05/grid_system_research_4/
http://hi.baidu.com/pop123shen/item/2929385d4d4f663594eb053b
http://hi.baidu.com/zhangqian04062/item/122731cfee19d802c610b239
http://hi.baidu.com/zhangqian04062/item/87895480c829e2e0e596e03c