雙飛翼布局是圣杯布局的升級，但是雙飛翼布局沒有使用相對定位，實現(xiàn)方法是在圣杯布局的基礎(chǔ)上新建一個div，只用浮動和負邊距就可以實現(xiàn)雙飛翼布局。

html

<div class="main-wrap">
  <div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>

布局步驟：

1. 三者都設(shè)置向左浮動
2. 設(shè)置main-warp寬度為100%，設(shè)置兩個側(cè)欄的寬度
3. 設(shè)置負邊距，sub的負邊距設(shè)置為100%，extra的負邊距設(shè)置為自身寬度
4. 設(shè)置main的margin值為左右兩個側(cè)欄的寬度

css

.main-wrap{
float:left;
width:100%;
}
.mian{
margin:0 230px 0 190px;
}
.sub{
float:left;
width:190px;
margin-left:-100%;
}
.extra{
float:left;
width:230px;
margin-left:-230px;
}

end

一盞燈， 一片昏黃； 一簡書， 一杯淡茶。 守著那一份淡定， 品讀屬于自己的寂寞。 保持淡定， 才能欣賞到最美麗的風景！ 保持淡定， 人生從此不再寂寞。