关于CSS的三无原则：无浮动，无宽度，无图片。
实现效果：左右两栏宽度固定或设置百分比，中间一栏宽度自适应。
方法1：绝对定位法-----【将左右两栏绝对定位放两边，中间使用margin属性撑开】
html,body{margin:0;height:100%;}
#left,#right{position:absolute;top:0;width:20%;height:100%;}
#left{left:0;background-color:pink;}
#right{right: 0;background-color: pink;}
#main{margin: 0 22%;height: 100%;background-color: yellow;}
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
//左中右三个div的顺序是可以任意调整的，其它方法则不能，对顺序有限制。
1.png
方法2：margin负值法-----【三部分主体都浮动，再采用margin-left确定左右栏的位置】
html,body{margin:0;height:100%;}
#main{float:left;width:100%;height:100%;}
#main #body{margin:0 22%;height:100%;background-color: lightgreen;}
#left,#right{float:left;width:20%;height:100%;background-color:pink;}
#left{margin-left:-100%;}
#right{margin-left:-20%;}
<div id="main">
<div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>
//不能随意改变元素顺序，主体部分放在最开始。
1.png
方法3：左右浮动法
html,body{margin:0;height:100%;}
#main{height:100%;margin:0 22%;background-color:hotpink;}
#left,#right{width:20%;height:100%;background-color:pink;}
#left{float:left;}
#right{float:right;}
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
//不能随意改变元素顺序，主体部分放在最后。
//注意需要清除浮动
1.png
方法3：左右浮动法-----【方法3稍微改变一下】
html,body{margin:0;height:100%;}
#main{height:100%;overflow:hidden;background-color:hotpink;}
#left,#right{width:20%;height:100%;background-color:pink;}
#left{float:left;margin-right:2%}
#right{float:right;margin-left:2%}
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
【将main设置overflow:hidden; 产生BFC，浮动对其不影响，宽度重新计算】
1.png
