CSS实现三栏自适应

主要了解常规三栏，圣杯布局，双飞翼布局。

其中常规三栏主要解决自适应问题。
圣杯布局和双飞翼布局主要解决中间优先渲染的问题，三栏全部float。区别在于双飞翼布局middle外面加了一层div，而圣杯布局是在全局外面加了div。

常规三栏布局：

1.固定布局法

<left></left>
<middle></middle>
<right></right>

body{
margin:0;
padding: 0;
}
.left{
position: absolute;
width: 100px;
background-color: blue;
left: 0;
top: 0;
}
.right{
position: absolute;
right: 0;
top: 0;
width: 100px;
background-color: red;
}
.middle{
background-color: yellow;
padding-left: 100px;
padding-right: 100px;

}

2.margin负值法

需要优先渲染 middle,需要引入div进行float 让自身能够直接margin:0 100px.既要能缩进，又要其他元素能上来。

<div><middle></middle></div>
<left></left>
<right></right>

.container {
width: 100%;
float: left;
}
.left{
width: 100px;
float: left;
margin-left: -100%;
background-color: blue;
}
.right{
width: 100px;
float: left;
margin-left: -100px;
background-color: red;
}
.middle{
margin: 0 100px;
background-color: yellow;
}

3.左右浮动法

最后渲染middle

<left></left>
<right></right>
<middle></middle>

.left{
width: 100px;
float: left;
background-color: blue;
}
.right{
width: 100px;
float: right;
background-color: red;
}
.middle{
margin:0 100px;
background-color: yellow;
}

圣杯布局：

<middle></middle>
<left></left>
<right></right>

.middle {
width: 100%;
height: 400px;
float: left;
background-color: yellow;
}
.container {
padding: 0 100px;
}
.left {
width: 100px;
float: left;
position: relative;
left: -100px;
height: 100px;
margin-left: -100%;
background-color: blue;
}
.right {
width: 100px;
height: 300px;
float: left;
position: relative;
right: -100px;
margin-left: -100px;
background-color: black;
}

双飞翼布局：

.middle {
height: 400px;
margin: 0 100px;
background-color: yellow;
}
.container {
float: left;
width: 100%;
}
.left {
width: 100px;
float: left;
height: 100px;
margin-left: -100%;
background-color: blue;
}
.right {
width: 100px;
height: 300px;
float: left;
margin-left: -100px;
background-color: black;
}