圣杯+双飞翼布局

圣杯布局

1.设置三栏全部浮动
2.设置 left{margin-left:-100%}，right{margin-left:-[ element width] }就会飘上去
3.利用 position:relative 调整left right位置

双飞翼布局

双飞翼布局前两部和圣杯局部一样
1.设置三栏全部浮动
2.设置 left{margin-left:-100%}，right{margin-left:-[ element width] }就会飘上去
3.用一个div包裹main 用margin调整内容只能在中间

异同

1.圣杯用padding来控制main的范围，双飞翼用margin。

优劣：

两种布局都可以使main在文档流前面，有利于搜索引擎优化。
劣势个人水平太低，暂时没有发现。

知识点

负边距的应用

1.负边距可以使width:auto 增加宽度
2.负边距可以改变元素在文档流中的位置 top/left 移动元素 right/bottom 会让元素“变小”
3.负边距可以用来水平垂直居中布局

<style>
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
</style>

PS：

另外学习到另一种三栏布局，
main在最后 left right 在前面
1.利用浮动 left{float:left} right{float:right}
2.设置main 的 margin 则可以达到效果。
优劣：
布局非常简单，不利于优化。