作者：知乎用戶
鏈接? ?來源：知乎
圣杯布局的來歷是2006年發(fā)在a list part上的這篇文章：
In Search of the Holy Grail · An A List Apart Article
圣杯是西方表達“渴求之物"的意思，不是一種對頁面的形象表達。
雙飛翼據(jù)考源自淘寶UED，應(yīng)該是一種頁面的形象的表達。
圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊頂寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。
圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div并排，以形成三欄布局。
不同在于解決”中間欄div內(nèi)容不被遮擋“問題的思路不一樣：
圣杯布局，為了中間div內(nèi)容不被遮擋，將中間div設(shè)置了左右padding-left和padding-right后，將左右兩個div用相對布局position: relative并分別配合right和left屬性，以便左右兩欄div移動后不遮擋中間div。
雙飛翼布局，為了中間div內(nèi)容不被遮擋，直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容，在該子div里用margin-left和margin-right為左右兩欄div留出位置。
多了1個div，少用大致4個css屬性（圣杯布局中間divpadding-left和padding-right這2個屬性，加上左右兩個div用相對布局position: relative及對應(yīng)的right和left共4個屬性，一共6個；而雙飛翼布局子div里用margin-left和margin-right共2個屬性，6-2=4），個人感覺比圣杯布局思路更直接和簡潔一點。
簡單說起來就是”雙飛翼布局比圣杯布局多創(chuàng)建了一個div，但不用相對布局了“，而不是你題目中說的”去掉relative"就是雙飛翼布局“
實現(xiàn)效果：
實現(xiàn)代碼
圣杯：
雙飛翼
flex
