3、雙飛翼布局和圣杯布局的區(qū)別
圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，即：
- 中間欄寬度設(shè)置為100%
- 三欄全部float浮動(dòng)
- 左右兩欄加上負(fù)margin讓其跟中間欄div并排，以形成三欄布局。
不同在于解決中間欄div內(nèi)容不被遮擋問題的思路不一樣。
圣杯布局
- 將三欄的外包裹層設(shè)置左右padding-left和padding-right
- 將左右兩個(gè)div用相對布局position: relative并分別配合right和left屬性，相對自身移動(dòng)以便不遮擋中間div
雙飛翼布局
- 中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容
- 在該子div里用margin-left和margin-right為左右兩欄div留出位置
多了1個(gè)div，少用4個(gè)css屬性（圣杯布局中間divp的adding-left和padding-right這2個(gè)屬性，加上左右兩個(gè)div用相對布局position: relative及對應(yīng)的right和left共4個(gè)屬性，一共6個(gè)；而雙飛翼布局子div里用margin-left和margin-right共2個(gè)屬性，6-2=4）。
并且雙飛翼布局還有個(gè)好處，讓Main變成BFC元素了，屏幕寬度縮小Main也不會被擠下去，圣杯布局就會被擠下去。
附：
淺談雙飛翼布局和圣杯布局（一）
淺談雙飛翼布局和圣杯布局（二）
