雙飛翼布局的意義
第一可以實現三列布局左右固定寬度，中間寬度自適應，第二個，通常三列布局都是按照左(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;}
效果如圖：
_1
鳥身
- 此時
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;}
效果圖：
_0
