合理的布局是產品的基礎，可以使人感覺整齊大方，提升用戶體驗。掌握幾種常見的布局形式也是前端開發的基礎，對于快速實現頁面重構有很大幫助。
原文鏈接
單列布局
單列布局通常用于網站的首頁，分為頭部的導航、網頁內容、頁腳相關信息。
//html
<div class="body">
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>
</div>
//css
.body{
max-width: 1200px;
margin: 0 auto;
}
優點：布局實現簡單，界面顯示整體性強，給人感覺簡潔大方。
左右布局
左右布局常見于博客、后臺管理系統，左側為導航，右側做內容顯示。
//html
<div class="body">
<div class="left"></div>
<div class="right"></div>
</div>
float+margin
左側元素設置成向左浮動并固定寬度，右側元素左外邊距預留出左側元素的寬度。
//css
.body{
max-width: 1200px;
margin: 0 auto;
}
.left{
width: 200px;
float: left;
}
.right{
margin-left: 200px;
}
優點：布局簡單，右側寬帶可自適應。
position+margin
左側元素用絕對定位固定在左邊，右側元素預留左外邊距。
.body{
max-width: 1200px;
margin: 0 auto;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.right{
margin-left: 200px;
}
優點：左側內容可固定位置，右側內容寬度自適應。
圣杯布局
圣杯布局和雙飛翼布局都是為了解決兩邊定寬，中間自適應的三欄布局，中間欄在最前面優先渲染，多見于商城類網站布局。
float+負margin+padding+position
布局步驟：
1、三列內容都設置向左浮動。
2、設置container寬度為100%，設置兩側欄的寬度。
3、設置left左邊距為負100%，設置right左邊距為負的自身寬度。
4、設置body的padding值給左右兩塊內容留空間。
5、設置left、right為相對定位，左側的left屬性值為負自身寬度，右側的right屬性值為負自身寬度。
//html
<div class="body">
<div class="container"></div>
<div class="left"></div>
<div class="right"></div>
</div>
//css
.body{
padding: 0 150px;
}
.container{
float: left;
width: 100%;
}
.left, .right{
position: relative;
float: left;
width: 150px;
}
.left{
left: -150px;
margin-left: -100%;
}
.right{
right: -150px;
margin-left: -150px;
}
這種布局中html的順序不能更改，當窗口過小時會出現布局錯亂，可以設置min-widthmin-width解決。
雙飛翼布局
雙飛翼布局始于淘寶UED，與圣杯布局相似，但是做了改進，是用html結構的調整減少了相對屬性設置
float+負margin+margin
布局步驟：
1、三列內容都設置向左浮動。
2、設置container寬度為100%，設置左右內容的寬度。
3、設置left左邊距為負100%，設置right左邊距為負自身寬度。
4、設置content的margin值給左右內容留空間。
//html
<div class="container">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
//css
.container, .left, .right{
float: left;
}
.container{
width: 100%;
}
.left{
width: 150px;
margin-left: -100%;
}
.right{
width: 150px;
margin-left: -150px;
}
.content{
margin: 0 150px;
}
優點：
- 圣杯采用的是padding，而雙飛翼采用的margin，解決了圣杯布局main的最小寬度不能小于左側欄的缺點。
- 雙飛翼布局不用設置相對布局，以及對應的left和right值。
- 通過引入相對布局，可以實現三欄布局的各種組合，例如對右側欄設置position: relative; left: 150px; ,可以實現left+right+content的布局。
flex布局
與傳統布局方式相比，flex提供了一套簡潔、完整、響應式的解決方案。
可以看下flex布局學習了解一下。
這里只是簡單介紹幾種布局方式，display+position+float屬性可以實現不同特殊效果布局展現形式，選擇最適合的方案才是王道
