雙飛翼佈局的意義
第一可以實現三列布局左右固定寬度，中間寬度自適應，第二個，通常三列布局都是按照左(sub)中(main)右(extra)順序來寫的，這樣頁面也會根據這個DOM結構來順序加載，而如果用雙飛翼佈局，可以使三列布局中mian先加載，sub和extra後加載。
雙飛翼佈局的實現
雙翼
html:
<body>
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</body>- 這裏如果都設置左浮動，
main就會出現在頁面左邊; - 我們都知道，如果浮動佈局一排裏顯示不下時，行框就會被擠到下一行；
- 那麼如果邊距爲負，他會移動到頁面以外，當值大於等於自身寬度時，他就會被移動到上一行。
- 這時就可以使用負邊距來實現另外兩列的佈局
css:
.main{ float:left;width:100%;}
.sub{ float:left;width:190px;margin-left:-100%;}
.extra{float:left;width:230px;margin-left:-230px;}效果如圖：
鳥身
- 此時
sub和extra都定位到正常位置了，但是main的左側和右側被擋住了。 - 因爲
main,sub,extra都處在浮動層，而且main是固定寬度，如果給main設置margin或者padding值，會因爲其固有的寬度而撐開飛翼佈局，直接影響到sub,extra的位置； - 所以給
main設置一個內層,爲內層設置margin值
html:
<div class="main">
<div class="main-content">
</div>
</div>
<div class="sub"></div>
<div class="extra"></div>css:
.main-content{margin:0 230px 0 190px;}效果圖：
