三栏网页宽度自适应布局方法
前言：三栏网页宽度自适应布局方法常见的方法有三种：绝对定位法，margin负值法，自身浮动法。详解如下：
1、绝对定位法
理解：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离,也就是说主体栏的左margin大于或等于左栏的宽度，主体栏的右margin同样也要大于或等于右栏的宽度。于是实现了三栏自适应布局。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位法三栏自适应布局</title>
</head>
<style>
html,body{
margin: 0;
height: 100%;
}
#left{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background: red;
}
#right{
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
background: blue;
}
#main{
height: 100%;
margin:0 210px;
background: yellow;
}
</style>
<body>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</body>
</html>
效果如下图：
缺点：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。
2、margin负值法
理解：中间的主体栏要使用双层标签。外层一个div宽度100%显示，并且浮动。并且内层content的div才是真正的主体内容，并给内层div含有左右210px的margin值，那样主体栏左右就空出了210px的宽度。
左栏与右栏都是采用margin负值定位的。左栏左浮动，margin-left为-100%，由于前面主体栏的div宽度为100%，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200px。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>margin负值法三栏自适应布局</title>
</head>
<style>
html,body{
margin: 0;
height: 100%;
}
#main{
width: 100%;
height: 100%;
float: left;
}
#main #content{
height: 100%;
margin: 0 210px;
background: yellow;
}
#left{
width: 200px;
height: 100%;
float: left;
margin-left: -100%;
background: red;
}
#right{
width: 200px;
height: 100%;
margin-left: -200px;
float: left;
background: blue;
}
</style>
<body>
<div id="main">
<div id="content"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
效果与绝对定位法效果一致。
需要注意的一点是：主体，左右侧栏都用了左浮动，但一定是主体栏部分先浮动，那是一定以及肯定的。至于左右两栏谁先谁后，都无所谓。
3、自身浮动法
理解：应用了标签浮动，标签后面的内容会跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自身浮动法三栏自适应布局</title>
</head>
<style>
html,body{
margin: 0;
height: 100%;
}
#main{
height: 100%;
margin: 0 210px;
background: yellow;
}
#left{
width: 200px;
height: 100%;
float: left;
background: red;
}
#right{
width: 200px;
height: 100%;
float: right;
background: blue;
}
</style>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>
</html>
效果同第一个相同。
缺点：1）中间主体存在clear:both属性。如果要使用此方法，需避免明显的clear；2）样式在ie6下会有3px的bug，解决方法：使用hack指定main的margin:0 207px;
需要注意：三个div标签的顺序的关键是要把主体栏div放在最后，左右两栏div顺序任意。
