绝对定位法， margin负值法， 自身浮动法
限定下示例的布局结构：左中右三栏布局，左右两栏宽度固定（要想不固定将宽度值改为百分值即可），中间栏宽度自适应。左右两栏的宽度为200像素。
1. 绝对定位法
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离
<style>
html, body {
margin: 0;
height: 100%;
}
#left, #right {
position: absolute;
top: 0;
width: 200px;
height: 100%;
}
#left {
left: 0;
background: red;
}
#right {
right: 0;
background: red;
}
#main {
margin: 0 210px;
background: green;
height: 100%;
}
</style>
<body>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</body>
2. margin负值法
首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。
<style>
html, body{
margin: 0;
height: 100%;
}
#main{
width: 100%;
height: 100%;
float: left;
}
#main #body{
margin: 0 210px;
background: green;
height: 100%;
}
#left, #right{
width: 200px;
height: 100%;
float: left;
background: red;
}
#left{
margin-left: -100%;
}
#right{
margin-left: -200px;
}
</style>
<body>
<div id="main">
<div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>
3. 自身浮动法
应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。
<style>
html, body {
margin: 0;
height: 100%;
}
#main {
height: 100%;
margin: 0 210px;
background: green;
}
#left, #right {
width: 200px;
height: 100%;
background: red
}
#left {
float: left;
}
#right {
float: right;
}
</style>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>
备注：转载于 [张鑫旭-鑫空间-鑫生活]
