上一次我們已經說完了聖杯布局，這次來說說雙飛翼布局吧。
首先，先給上全部**
>雙飛翼布局
title
>
<
style
>
* header,
footer
.text
.bd
.main
.main-content
.left
.right
style
>
head
>
<
body
>
<
header
>雙飛翼布局
header
>
<
div
class
="bd"
>
<
div
class
="main text"
>
<
div
class
="main-content"
>main
div>
div>
<
div
class
="left text"
>
left
div>
<
div
class
="right text"
>
right
div>
div>
<
footer style:"clear：both"
>footer
footer
>
body
>
html
>
上述**與聖杯布局相比html的結構不一樣，在中間欄多了乙個內容欄，根據盒子模型，我們就不能在main欄設定margin，因為之前設定了width：100%，若再設定margin會
超過所設寬度，我們用內容欄存放內容，並設定margin。
逐步解析
雙飛翼布局與聖杯布局前幾步是一樣的,
1.給中間欄main設定width：100%，讓它始終佔滿視窗，這樣才有自適應的效果。設定背景顏色
2.給左右兩個欄固定width和height。設定背景顏色
效果如下：
3.給三個欄設定左浮動；float：left（注意清除浮動，因為浮動會導致父元素高度塌陷）
4.這裡開始是重頭戲了，我們使用到強大的負外邊距了，我們先處理左欄，因為中間欄的寬度為100%，所以左欄被擠到下面去了。現在left要到最左邊的位置，所以我們在left的樣式下輸入：margin-left：-100%；
5.同理，接下來讓right到main的右邊，只需要設定margin-left的值為負的right的寬，使main重疊right的寬度，因為設定了浮動所以right就會到main的右邊。
6.中間內容欄設定 margin: 0 200px;
至此我們的雙飛翼布局就已經實現了
在此說說聖杯布局與雙飛翼布局的區別吧：
相同點：
1.兩個都是三欄式布局，中間欄優先放，保證優先渲染
2.實現方式都是左浮動
不同點：
1聖杯布局是中間欄為兩邊騰開位置。雙飛翼布局則是中間欄不變，將內容部分為兩邊騰開位置
雙飛翼布局
第一可以實現三列布局左右固定寬度，中間寬度自適應，第二個，通常三列布局都是按照左 sub 中 main 右 extra 順序來寫的，這樣頁面也會根據這個dom結構來順序載入，而如果用雙飛翼布局，可以使三列布局中mian先載入，sub和extra後載入。html class main div clas...
雙飛翼布局
ued的本意是使用者體驗設計，user experience design,通常的理解，我們做的一切是為了呈現在您眼前的頁面。這是我們平時的寫法，為其新增css樣式 如果按照浮動方法寫，頁面在被瀏覽器解析時，按照左側功能區塊，主題內容功能區塊，右側功能區塊進行載入。但是現在很多專案都是需要主體功能區...
雙飛翼布局
雙飛翼布局 zhongjian zuobian zhongjian 作用 是 團隊提出一種優化寫法，main寫在前面，優先載入，優先渲染，而且相容性好。中間部分優先載入,有利於使用者體驗 doctype html html head title 雙飛翼布局 title meta charset ut...