要學的知識：聖盃佈局 聖盃佈局小結
轉
聖盃佈局小結
閱讀目錄
聖盃佈局，很久之前就聽過，但是一直都沒詳細瞭解過，最近因為做了一個專案，借鑑了薪人薪事這個公司的產品頁面，才第一次用到這種佈局方式。於是就花了點時間，測了下它實現常見分欄佈局的程式碼，每段程式碼都非常簡單，但佈局效果很完美，比我以前用的方式好用不少。本文是對它實現方式的一些總結，希望可以把這種技術推薦給跟我之前一樣對它比較陌生的開發人員：）
1. 從2個實際的需求說起
今年有2個專案，都是管理系統的專案，這種專案的介面特點基本都是左側邊欄顯示選單，右側顯示網頁主體或者是頂部的導航欄顯示選單，導航欄以下顯示網頁主體，我這兩個專案都是第一種型別：
專案一：
專案二：
在做專案一的時候，採用了以前做ERP軟體的一些做法，右邊的網頁主體區域放置的是一個iframe，用來顯示每個選單點選之後的頁面，這樣每個選單點選之後，外部頁面都不會重新整理，並且滾動也只發生在iframe裡面，外部頁面的選單區域和頂部導航欄的狀態始終不會改變，使用者操作起來非常便捷。這種介面佈局的做法非常簡單，只要側邊欄和網頁主體區域都採用固定定位即可：
- Hide code<div class="sidebar"></div>
<div class="page-content"></div>
.sidebar {
position: absolute;
width: 200px;
left: 0;
bottom: 0;
top: 50px;
border-right: 1px solid #E7E7E7;
}
.page-content {
position: absolute;
left: 205px;
bottom: 0;
top: 50px;
right: 0;
}由於這個專案是一個內部專案，所以採用這種介面結構完全是可以接受的，畢竟這只是一個管理系統，可以不那麼在乎使用者體驗什麼的。最近做專案二的時候，情況就不一樣了，這個專案是一個企業級的管理應用，它不再是一個單純的管理系統，而是面向外部使用者提供的參與平臺業務的一個終端應用，從使用者體驗的角度來說，專案一那種固定死板的方式不太拿得出手給別人用，不然別人肯定會認為你的應用做的很low。相對於專案一的介面，專案二有以下特點：
1）選單點選之後，介面是整體重新整理，沒有iframe了；
2）側邊欄和主體內容欄的高度都是不固定的；
3）網頁滾動的時候，是頁面整體滾動，而不是隻滾動主體內容。
幾個禮拜前，看到薪人薪事融資的新聞，心想這是個什麼公司，怎麼之前都沒聽過，做什麼業務的，於是就百度了下，註冊了賬號，進去體驗了一下它的產品，後來發現它做的其實是一個SAAS應用，介面上看是一個典型的管理系統的風格，但是整體體驗還不錯，當時就覺得以後說不定有參考借鑑的價值。正好上週臨時安排要做專案二，根據專案一提了一些要求，於是就想到薪人薪事的應用了。只有3天時間，工作除了介面之外，還有4個業務模組的功能要完成，為了完成這個東西，介面佈局完全參考了薪人薪事的做法，由於以前沒用過這種佈局方式，所以覺得很新奇，就專門蒐集知識學習了一下，才發現這個方法就是以前聽過的聖盃佈局。專案二所用的佈局方法就是聖盃佈局方式中側邊欄固定，主體內容欄自適應的一種做法。
2. 聖盃佈局的傳統實現方法
利用聖盃佈局的方法，可以輕鬆實現下面的佈局效果：
下面來一一說明上圖中五種佈局效果的實現方法（本文相關程式碼下載，本部分的佈局方法在程式碼中對應grail_layout{1,5}.html）。
1）佈局一：2欄佈局，側邊欄固定在左邊，右側是主體內容欄：
- Hide code<div class="layout">
<aside class="layout__aside">側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
</div>
- Hide code
<style type="text/css">
.layout:after {
clear: both;
content: " ";
display: table;
}
.layout__aside, .layout__main {
float: left;
}
.layout {
padding-left: 210px;
}
.layout__main {
width: 100%;
}
.layout__aside {
width: 200px;
margin-left: -210px;
}
</style>
效果是：
2）佈局二：2欄佈局，側邊欄固定在右邊，左側是主體內容欄：
- Hide code<div class="layout">
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">側邊欄寬度固定</aside>
</div>
- Hide code
<style type="text/css">
.layout:after {
clear: both;
content: " ";
display: table;
}
.layout {
padding-right: 210px;
}
.layout__main {
width: 100%;
float: left;
}
.layout__aside {
float: right;
width: 200px;
margin-right: -210px;
}
</style>
效果是：
3）佈局三：3欄佈局，2個側邊欄分別固定在左邊和右邊，中間是主體內容欄：
- Hide code<div class="layout">
<aside class="layout__aside layout__aside--left">左側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside>
</div>
- Hide code
<style type="text/css">
.layout:after {
clear: both;
content: " ";
display: table;
}
.layout__aside, .layout__main {
float: left;
}
.layout {
padding:0 210px;
}
.layout__main {
width: 100%;
}
.layout__aside {
width: 200px;
}
.layout__aside--left {
margin-left: -210px;
}
.layout__aside--right {
margin-right: -210px;
float: right;
}
</style>
效果是：
4）佈局四：3欄佈局，2個側邊欄同時固定在左邊，右邊是主體內容欄：
- Hide code<div class="layout">
<aside class="layout__aside layout__aside--first">第1個側邊欄寬度固定</aside>
<aside class="layout__aside layout__aside--second">第2個側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
</div>
- Hide code
<style type="text/css">
.layout:after {
clear: both;
content: " ";
display: table;
}
.layout__aside, .layout__main {
float: left;
}
.layout {
padding-left: 420px;
}
.layout__main {
width: 100%;
}
.layout__aside {
width: 200px;
}
.layout__aside--first {
margin-left: -420px;
}
.layout__aside--second {
margin-left: -210px;
}
</style>
效果是：
5）佈局五：3欄佈局，2個側邊欄同時固定在右邊，左邊是主體內容欄：
- Hide code<div class="layout">
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside layout__aside--first">第1個側邊欄寬度固定</aside>
<aside class="layout__aside layout__aside--second">第2個側邊欄寬度固定</aside>
</div>
- Hide code
<style type="text/css">
.layout:after {
clear: both;
content: " ";
display: table;
}
.layout {
padding-right: 420px;
}
.layout__main {
width: 100%;
float: left;
}
.layout__aside {
width: 200px;
float: right;
}
.layout__aside--first {
margin-right: -210px;
}
.layout__aside--second {
margin-right: -420px;
}
</style>
效果是：
PS：
1）本文提供的這個佈局方法，比網上看到的更加簡潔一些，主要是因為不考慮相容IE8及以下，不考慮把layout__main這個元素放在最前面，雖然經典的做法都要求把layout__main做法放在前面，這樣可以讓網頁主體內容優先渲染，我認為這種考慮是完全多餘的，2個元素的渲染順序不同，實際上的使用者體驗差別又有多大呢，為了一個肉眼看不到的差異，而採用更復雜的做法，不值得；
2）css佈局類的命名採用了BEM的命名規則，這個可以幫助你寫出結構化，規範化的css，有興趣的可以去了解：
http://www.zhihu.com/question/21935157
3）在使用以上方法時，需注意html結構中layout__main與layout__aside的順序；
3. 聖盃佈局傳統實現方法的一種變體
第2部分介紹的方法，使用訣竅是:
1）layout元素根據分欄佈局的要求設定合適的padding，比如佈局一，需配置padding-left；
2）layout__main和layout__aside元素都需要浮動，layout__main需配置float: left；layout__aside需根據分欄佈局要求配置合適的float值，比如佈局一，需配置為float: left；而佈局二需配置float: right；
3）layout__main和layout__aside的順序也很關鍵，具體內容可對比前面五種佈局的html；
4）layout__aside需根據分欄佈局要求，配置合適的margin-left或margin-right，比如佈局一，需配置margin-left；佈局二需配置margin-right。
雖然我不喜歡一定要堅持把layout__main放在前面，但是從第2部分這種方法的思路，衍生出的另外一種方法，卻不得不要求始終把layout__main放在最前面，這種變體做法，也被稱之為雙飛翼佈局。下面來看看雙飛翼佈局的實現方法（考慮到篇幅問題，本處僅提供佈局三的程式碼，要想了解五種佈局的詳細方法，可以通過在第2部分提供的下載連結下載原始碼去了解，本部分的佈局方法在程式碼中對應wing_layout{1,5}.html）
1）佈局三：3欄佈局，2個側邊欄分別固定在左邊和右邊，中間是主體內容欄：
- Hide code<div class="layout__main-wrapper">
<div class="layout__main">主內容欄寬度自適應</div>
</div>
<aside class="layout__aside layout__aside--left">左側邊欄寬度固定</aside>
<aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside>
<footer class="clear">底部</footer>
- Hide code
<style type="text/css">
.clear {
clear: both;
}
.layout__main-wrapper,.layout__aside {
float: left;
}
.layout__main-wrapper {
width: 100%;
}
.layout__main {
margin: 0 210px;
}
.layout__aside {
width: 200px;
}
.layout__aside--left {
margin-left: -100%;
}
.layout__aside--right {
margin-left: -200px;
}
</style>
這段程式碼的效果與第2部分佈局三的效果一樣，這種佈局的訣竅是：
1）可以沒有layout這一層包裹元素；
2）浮動清除需在外部元素上處理；
3）float和margin屬性的設定方向相對統一，基本都是一個方向即可；
4）佈局四和佈局五實現起來，雙飛翼佈局還需要藉助position:relative才行，相對要複雜一點。
4. 聖盃佈局的純浮動實現
前面兩種方法都有2個共同點：
1）layout__main或layout__main-wrapper和layout__aside都會同時浮動；
2）都得藉助負值屬性實現。
其實還存在一種更加簡潔的做法，不需要浮動layout__main或layout__main-wrapper，也不需要藉助負值屬性，只要浮動layout__aside，給layout__main加上合適的margin值，就可以利用浮動元素的特性，完成想要的分欄佈局效果。還是以佈局三為例，說明這種方式，其它方式可以從原始碼中檢視，對應的是float_layout{1,5}.html：
- Hide code<aside class="layout__aside layout__aside--left">左側邊欄寬度固定</aside> <aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside> <div class="layout__main">主內容欄寬度自適應</div> <footer class="clear">底部</footer>- Hide code
<style type="text/css">
.clear {
clear: both;
}
.layout__main {
margin: 0 210px;
}
.layout__aside--left {
width: 200px;
float: left;
}
.layout__aside--right {
width: 200px;
float: right;
}
</style>
這段程式碼的效果與第2部分佈局三的效果一樣，這種方法的特點是：
1）清除浮動需藉助外部元素；
2）layout__main上面不能使用clear屬性。
5. 聖盃佈局的flex實現
flex佈局是一種新的網頁佈局方式，目前的相容性如下：
如果你還沒有了解過flex佈局，建議你趕緊去學習，雖然它在pc上相容性還有點問題，但是在移動端已經完全沒有問題了，微信官方推出的weui這個框架就大量地使用了這種佈局，以下是2個學習這種佈局方式的非常好的資源：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
flex佈局即將成為網頁佈局的首選方案，當你看到用flex來實現聖盃佈局的程式碼有多簡單的時候，你就會覺得前面那句話一點都沒錯。使用flex，可以只用同一段css實現第2部分提到的五種佈局：
- Hide code<div class="layout">
<aside class="layout__aside">側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
</div>
<div class="layout">
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">側邊欄寬度固定</aside>
</div>
<div class="layout">
<aside class="layout__aside">左側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">右側邊欄寬度固定</aside>
</div>
<div class="layout">
<aside class="layout__aside">第1個側邊欄寬度固定</aside>
<aside class="layout__aside">第2個側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
</div>
<div class="layout">
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">第1個側邊欄寬度固定</aside>
<aside class="layout__aside">第2個側邊欄寬度固定</aside>
</div>
- Hide code
<style type="text/css">
.layout {
display: flex;
}
.layout__main {
flex: 1;
}
.layout__aside {
width: 200px;
}
.layout > .layout__aside:not(:first-child),
.layout > .layout__main:not(:first-child){
margin-left: 10px;
}
</style>
效果與第2部分每種佈局做法的結果一模一樣，但是程式碼減少了很多，而且適用的場景更多，比如4欄佈局，5欄佈局。
7. 結束語
本文提供了4種聖盃佈局的方法，每種方法在當前或者將來的工作中，肯定會有很多場景都需要使用，所以有必要完全掌握這些方法，內容不多，也不復雜，希望能對你有用，謝謝閱讀：）
補充：原本只想介紹聖盃佈局這一種方法，後來覺得這樣的內容有點粗糙，於是又專門去學習了另外2種分欄佈局的方法，補充到了文章裡面（也就是第3、4部分），所以文章雖然題為聖盃佈局，但實際上講的是分欄佈局的常用方法，只有第2部分才能算是準確的聖盃佈局的內容。由於本文在釋出前後編輯了多次，導致標題跟內容有些脫節，請勿見怪：（
如果您覺得本文對你有用，不妨幫忙點個贊，或者在評論裡給我一句讚美，小小成就都是今後繼續為大家編寫優質文章的動力，流雲拜謝！ 歡迎您持續關注我的部落格：) 作者：流雲諸葛 出處：http://www.cnblogs.com/lyzg/ 版權所有，歡迎保留原文連結進行轉載：) 分類: CSS 標籤: CSS佈局, 聖盃佈局, flex佈局閱讀目錄
聖盃佈局，很久之前就聽過，但是一直都沒詳細瞭解過，最近因為做了一個專案，借鑑了薪人薪事這個公司的產品頁面，才第一次用到這種佈局方式。於是就花了點時間，測了下它實現常見分欄佈局的程式碼，每段程式碼都非常簡單，但佈局效果很完美，比我以前用的方式好用不少。本文是對它實現方式的一些總結，希望可以把這種技術推薦給跟我之前一樣對它比較陌生的開發人員：）
1. 從2個實際的需求說起
今年有2個專案，都是管理系統的專案，這種專案的介面特點基本都是左側邊欄顯示選單，右側顯示網頁主體或者是頂部的導航欄顯示選單，導航欄以下顯示網頁主體，我這兩個專案都是第一種型別：
專案一：
專案二：
在做專案一的時候，採用了以前做ERP軟體的一些做法，右邊的網頁主體區域放置的是一個iframe，用來顯示每個選單點選之後的頁面，這樣每個選單點選之後，外部頁面都不會重新整理，並且滾動也只發生在iframe裡面，外部頁面的選單區域和頂部導航欄的狀態始終不會改變，使用者操作起來非常便捷。這種介面佈局的做法非常簡單，只要側邊欄和網頁主體區域都採用固定定位即可：
- Hide code<div class="sidebar"></div>
<div class="page-content"></div>
.sidebar {
position: absolute;
width: 200px;
left: 0;
bottom: 0;
top: 50px;
border-right: 1px solid #E7E7E7;
}
.page-content {
position: absolute;
left: 205px;
bottom: 0;
top: 50px;
right: 0;
}
由於這個專案是一個內部專案，所以採用這種介面結構完全是可以接受的，畢竟這只是一個管理系統，可以不那麼在乎使用者體驗什麼的。最近做專案二的時候，情況就不一樣了，這個專案是一個企業級的管理應用，它不再是一個單純的管理系統，而是面向外部使用者提供的參與平臺業務的一個終端應用，從使用者體驗的角度來說，專案一那種固定死板的方式不太拿得出手給別人用，不然別人肯定會認為你的應用做的很low。相對於專案一的介面，專案二有以下特點：
1）選單點選之後，介面是整體重新整理，沒有iframe了；
2）側邊欄和主體內容欄的高度都是不固定的；
3）網頁滾動的時候，是頁面整體滾動，而不是隻滾動主體內容。
幾個禮拜前，看到薪人薪事融資的新聞，心想這是個什麼公司，怎麼之前都沒聽過，做什麼業務的，於是就百度了下，註冊了賬號，進去體驗了一下它的產品，後來發現它做的其實是一個SAAS應用，介面上看是一個典型的管理系統的風格，但是整體體驗還不錯，當時就覺得以後說不定有參考借鑑的價值。正好上週臨時安排要做專案二，根據專案一提了一些要求，於是就想到薪人薪事的應用了。只有3天時間，工作除了介面之外，還有4個業務模組的功能要完成，為了完成這個東西，介面佈局完全參考了薪人薪事的做法，由於以前沒用過這種佈局方式，所以覺得很新奇，就專門蒐集知識學習了一下，才發現這個方法就是以前聽過的聖盃佈局。專案二所用的佈局方法就是聖盃佈局方式中側邊欄固定，主體內容欄自適應的一種做法。
2. 聖盃佈局的傳統實現方法
利用聖盃佈局的方法，可以輕鬆實現下面的佈局效果：
下面來一一說明上圖中五種佈局效果的實現方法（本文相關程式碼下載，本部分的佈局方法在程式碼中對應grail_layout{1,5}.html）。
1）佈局一：2欄佈局，側邊欄固定在左邊，右側是主體內容欄：
- Hide code<div class="layout">
<aside class="layout__aside">側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
</div>
- Hide code
<style type="text/css">
.layout:after {
clear: both;
content: " ";
display: table;
}
.layout__aside, .layout__main {
float: left;
}
.layout {
padding-left: 210px;
}
.layout__main {
width: 100%;
}
.layout__aside {
width: 200px;
margin-left: -210px;
}
</style>
效果是：
2）佈局二：2欄佈局，側邊欄固定在右邊，左側是主體內容欄：
- Hide code<div class="layout">
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">側邊欄寬度固定</aside>
</div>
- Hide code
<style type="text/css">
.layout:after {
clear: both;
content: " ";
display: table;
}
.layout {
padding-right: 210px;
}
.layout__main {
width: 100%;
float: left;
}
.layout__aside {
float: right;
width: 200px;
margin-right: -210px;
}
</style>
效果是：
3）佈局三：3欄佈局，2個側邊欄分別固定在左邊和右邊，中間是主體內容欄：
- Hide code<div class="layout">
<aside class="layout__aside layout__aside--left">左側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside>
</div>
- Hide code
<style type="text/css">
.layout:after {
clear: both;
content: " ";
display: table;
}
.layout__aside, .layout__main {
float: left;
}
.layout {
padding:0 210px;
}
.layout__main {
width: 100%;
}
.layout__aside {
width: 200px;
}
.layout__aside--left {
margin-left: -210px;
}
.layout__aside--right {
margin-right: -210px;
float: right;
}
</style>
效果是：
4）佈局四：3欄佈局，2個側邊欄同時固定在左邊，右邊是主體內容欄：
- Hide code<div class="layout">
<aside class="layout__aside layout__aside--first">第1個側邊欄寬度固定</aside>
<aside class="layout__aside layout__aside--second">第2個側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
</div>
- Hide code
<style type="text/css">
.layout:after {
clear: both;
content: " ";
display: table;
}
.layout__aside, .layout__main {
float: left;
}
.layout {
padding-left: 420px;
}
.layout__main {
width: 100%;
}
.layout__aside {
width: 200px;
}
.layout__aside--first {
margin-left: -420px;
}
.layout__aside--second {
margin-left: -210px;
}
</style>
效果是：
5）佈局五：3欄佈局，2個側邊欄同時固定在右邊，左邊是主體內容欄：
- Hide code<div class="layout">
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside layout__aside--first">第1個側邊欄寬度固定</aside>
<aside class="layout__aside layout__aside--second">第2個側邊欄寬度固定</aside>
</div>
- Hide code
<style type="text/css">
.layout:after {
clear: both;
content: " ";
display: table;
}
.layout {
padding-right: 420px;
}
.layout__main {
width: 100%;
float: left;
}
.layout__aside {
width: 200px;
float: right;
}
.layout__aside--first {
margin-right: -210px;
}
.layout__aside--second {
margin-right: -420px;
}
</style>
效果是：
PS：
1）本文提供的這個佈局方法，比網上看到的更加簡潔一些，主要是因為不考慮相容IE8及以下，不考慮把layout__main這個元素放在最前面，雖然經典的做法都要求把layout__main做法放在前面，這樣可以讓網頁主體內容優先渲染，我認為這種考慮是完全多餘的，2個元素的渲染順序不同，實際上的使用者體驗差別又有多大呢，為了一個肉眼看不到的差異，而採用更復雜的做法，不值得；
2）css佈局類的命名採用了BEM的命名規則，這個可以幫助你寫出結構化，規範化的css，有興趣的可以去了解：
http://www.zhihu.com/question/21935157
3）在使用以上方法時，需注意html結構中layout__main與layout__aside的順序；
3. 聖盃佈局傳統實現方法的一種變體
第2部分介紹的方法，使用訣竅是:
1）layout元素根據分欄佈局的要求設定合適的padding，比如佈局一，需配置padding-left；
2）layout__main和layout__aside元素都需要浮動，layout__main需配置float: left；layout__aside需根據分欄佈局要求配置合適的float值，比如佈局一，需配置為float: left；而佈局二需配置float: right；
3）layout__main和layout__aside的順序也很關鍵，具體內容可對比前面五種佈局的html；
4）layout__aside需根據分欄佈局要求，配置合適的margin-left或margin-right，比如佈局一，需配置margin-left；佈局二需配置margin-right。
雖然我不喜歡一定要堅持把layout__main放在前面，但是從第2部分這種方法的思路，衍生出的另外一種方法，卻不得不要求始終把layout__main放在最前面，這種變體做法，也被稱之為雙飛翼佈局。下面來看看雙飛翼佈局的實現方法（考慮到篇幅問題，本處僅提供佈局三的程式碼，要想了解五種佈局的詳細方法，可以通過在第2部分提供的下載連結下載原始碼去了解，本部分的佈局方法在程式碼中對應wing_layout{1,5}.html）
1）佈局三：3欄佈局，2個側邊欄分別固定在左邊和右邊，中間是主體內容欄：
- Hide code<div class="layout__main-wrapper">
<div class="layout__main">主內容欄寬度自適應</div>
</div>
<aside class="layout__aside layout__aside--left">左側邊欄寬度固定</aside>
<aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside>
<footer class="clear">底部</footer>
- Hide code
<style type="text/css">
.clear {
clear: both;
}
.layout__main-wrapper,.layout__aside {
float: left;
}
.layout__main-wrapper {
width: 100%;
}
.layout__main {
margin: 0 210px;
}
.layout__aside {
width: 200px;
}
.layout__aside--left {
margin-left: -100%;
}
.layout__aside--right {
margin-left: -200px;
}
</style>
這段程式碼的效果與第2部分佈局三的效果一樣，這種佈局的訣竅是：
1）可以沒有layout這一層包裹元素；
2）浮動清除需在外部元素上處理；
3）float和margin屬性的設定方向相對統一，基本都是一個方向即可；
4）佈局四和佈局五實現起來，雙飛翼佈局還需要藉助position:relative才行，相對要複雜一點。
4. 聖盃佈局的純浮動實現
前面兩種方法都有2個共同點：
1）layout__main或layout__main-wrapper和layout__aside都會同時浮動；
2）都得藉助負值屬性實現。
其實還存在一種更加簡潔的做法，不需要浮動layout__main或layout__main-wrapper，也不需要藉助負值屬性，只要浮動layout__aside，給layout__main加上合適的margin值，就可以利用浮動元素的特性，完成想要的分欄佈局效果。還是以佈局三為例，說明這種方式，其它方式可以從原始碼中檢視，對應的是float_layout{1,5}.html：
- Hide code<aside class="layout__aside layout__aside--left">左側邊欄寬度固定</aside> <aside class="layout__aside layout__aside--right">右側邊欄寬度固定</aside> <div class="layout__main">主內容欄寬度自適應</div> <footer class="clear">底部</footer>- Hide code
<style type="text/css">
.clear {
clear: both;
}
.layout__main {
margin: 0 210px;
}
.layout__aside--left {
width: 200px;
float: left;
}
.layout__aside--right {
width: 200px;
float: right;
}
</style>
這段程式碼的效果與第2部分佈局三的效果一樣，這種方法的特點是：
1）清除浮動需藉助外部元素；
2）layout__main上面不能使用clear屬性。
5. 聖盃佈局的flex實現
flex佈局是一種新的網頁佈局方式，目前的相容性如下：
如果你還沒有了解過flex佈局，建議你趕緊去學習，雖然它在pc上相容性還有點問題，但是在移動端已經完全沒有問題了，微信官方推出的weui這個框架就大量地使用了這種佈局，以下是2個學習這種佈局方式的非常好的資源：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
flex佈局即將成為網頁佈局的首選方案，當你看到用flex來實現聖盃佈局的程式碼有多簡單的時候，你就會覺得前面那句話一點都沒錯。使用flex，可以只用同一段css實現第2部分提到的五種佈局：
- Hide code<div class="layout">
<aside class="layout__aside">側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
</div>
<div class="layout">
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">側邊欄寬度固定</aside>
</div>
<div class="layout">
<aside class="layout__aside">左側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">右側邊欄寬度固定</aside>
</div>
<div class="layout">
<aside class="layout__aside">第1個側邊欄寬度固定</aside>
<aside class="layout__aside">第2個側邊欄寬度固定</aside>
<div class="layout__main">主內容欄寬度自適應</div>
</div>
<div class="layout">
<div class="layout__main">主內容欄寬度自適應</div>
<aside class="layout__aside">第1個側邊欄寬度固定</aside>
<aside class="layout__aside">第2個側邊欄寬度固定</aside>
</div>
- Hide code
<style type="text/css">
.layout {
display: flex;
}
.layout__main {
flex: 1;
}
.layout__aside {
width: 200px;
}
.layout > .layout__aside:not(:first-child),
.layout > .layout__main:not(:first-child){
margin-left: 10px;
}
</style>
效果與第2部分每種佈局做法的結果一模一樣，但是程式碼減少了很多，而且適用的場景更多，比如4欄佈局，5欄佈局。
7. 結束語
本文提供了4種聖盃佈局的方法，每種方法在當前或者將來的工作中，肯定會有很多場景都需要使用，所以有必要完全掌握這些方法，內容不多，也不復雜，希望能對你有用，謝謝閱讀：）
補充：原本只想介紹聖盃佈局這一種方法，後來覺得這樣的內容有點粗糙，於是又專門去學習了另外2種分欄佈局的方法，補充到了文章裡面（也就是第3、4部分），所以文章雖然題為聖盃佈局，但實際上講的是分欄佈局的常用方法，只有第2部分才能算是準確的聖盃佈局的內容。由於本文在釋出前後編輯了多次，導致標題跟內容有些脫節，請勿見怪：（