一、聖杯布局
聖杯布局是討論「三欄液態布局」的實現，它最早出自於誰或許不得而查了，但最早的完美實現是來自於 matthew levine 於2023年在「a list apart」上寫的一篇文章，它主要講述了網頁中關於最佳聖杯的實現方法。
所謂液態布局是相對固態布局而言的，固態布局就是固定值不變的布局，液態就好比在容器裡到了一杯水，
它可以隨著容器寬度的變化而自適應寬度。
在這篇文章中，作者指出了當時的一些實現方式所存在的問題，如：必須按照源順序（在 dom 中表現為先寫 left，然後 middle，最後，right）等，它將可能導致**不夠靈活，尤其是從 dom 的載入順序上來說，中間的內容不能被首先載入。
a.兩邊帶有固定寬度中間可以流動（fluid）；
b.允許中間一欄最先出現；
c.允許任意一欄放在最上面；
d.僅需乙個額外的 div 標籤
e.僅需非常簡單的 css，帶上最少的相容性補丁
文中還提到了他的這個想法是基於「one true layout」 和 「 eric meyer』s adaptation」兩篇文章帶來的靈感。
在這裡你可以看到「聖杯布局」的最終效果：
body
#container
#container
.column
#center
#left
#right
#footer
#header,
#footer
/*** ie6 fix ***/
* html
#left
style>
id="header">#headerdiv>
id="container">
id="center"
class="column">#centerdiv>
id="left"
class="column">#leftdiv>
id="right"
class="column">#rightdiv>
div>
id="footer">#footerdiv>
body>
二、雙飛翼布局
雙飛翼布局title>
* body
#header,#footer
/*#container*/
#container
.column
#center
#center
.wrap
#left
#right
#footer
style>
head>
id="header">this is header.div>
id="container">
id="center"
class="column">
class="wrap">this is content-center.div>
div>
id="left"
class="column">this is content-left.div>
id="right"
class="column">this is content-right.div>
div>
id="footer">this is footer.div>
body>
html>聖杯布局的來歷是2023年發在a list part上的這篇文章：
雙飛翼布局介紹-始於**ued：
還有這裡的一篇兩者的比較：
CSS布局 聖杯布局 雙飛翼布局
聖杯布局和雙飛翼布局解決的都是兩邊頂寬 中間自適應的三欄布局問題，要實現中間部分優先渲染。先上兩個demo。聖杯布局 雙飛翼布局 兩者的異同 首先如開題所述，兩種布局解決的問題是一樣的，只是實現方式有些微小的差別 兩者都採用了向左浮動的方式，還用實現布局的重點都是負邊距的使用 聖杯布局使用固定的左右...
CSS聖杯布局（雙飛翼布局）
我在網上看了有關於css聖杯布局的文章，有很多直接丟 給效果，看得我雲裡霧裡。首先按我的理解來講述一下聖杯布局吧。首先他的作用就是 像 網那樣，中間先渲染，兩邊後渲染，其次中間的內容是自適應高度的。最好的例子就是 網了。樣式 1.三列布局 2.中間板塊先渲染，自適應高度寬度 3.兩邊定寬 那我們就開...
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...