圣杯布局
1.設(shè)置三欄全部浮動
2.設(shè)置 left{margin-left:-100%}，right{margin-left:-[ element width] }就會飄上去
3.利用 position:relative 調(diào)整left right位置
雙飛翼布局
雙飛翼布局前兩部和圣杯局部一樣
1.設(shè)置三欄全部浮動
2.設(shè)置 left{margin-left:-100%}腔剂，right{margin-left:-[ element width] }就會飄上去
3.用一個div包裹main 用margin調(diào)整內(nèi)容只能在中間
異同
1.圣杯用padding來控制main的范圍，雙飛翼用margin发乔。
優(yōu)劣：
兩種布局都可以使main在文檔流前面茄螃，有利于搜索引擎優(yōu)化气筋。
劣勢個人水平太低拆内，暫時沒有發(fā)現(xiàn)。
知識點(diǎn)
負(fù)邊距的應(yīng)用
1.負(fù)邊距可以使width:auto 增加寬度
2.負(fù)邊距可以改變元素在文檔流中的位置 top/left 移動元素 right/bottom 會讓元素“變小”
3.負(fù)邊距可以用來水平垂直居中布局
<style>
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
</style>
PS：
另外學(xué)習(xí)到另一種三欄布局宠默，
main在最后 left right 在前面
1.利用浮動 left{float:left} right{float:right}
2.設(shè)置main 的 margin 則可以達(dá)到效果麸恍。
優(yōu)劣：
布局非常簡單，不利于優(yōu)化搀矫。
