關(guān)于CSS的三無原則：無浮動(dòng)狡汉，無寬度娄徊，無圖片。
實(shí)現(xiàn)效果：左右兩欄寬度固定或設(shè)置百分比盾戴，中間一欄寬度自適應(yīng)寄锐。
方法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>
//左中右三個(gè)div的順序是可以任意調(diào)整的尖啡，其它方法則不能橄仆，對順序有限制。
1.png
方法2：margin負(fù)值法-----【三部分主體都浮動(dòng)衅斩，再采用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：左右浮動(dòng)法
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>
//不能隨意改變元素順序畏梆，主體部分放在最后您宪。
//注意需要清除浮動(dòng)
1.png
方法3：左右浮動(dòng)法-----【方法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設(shè)置overflow:hidden; 產(chǎn)生BFC奈懒，浮動(dòng)對其不影響，寬度重新計(jì)算】
1.png
