亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

本課程只教別人設置浮動，文檔流與浮動的原理沒說清楚，以及清除浮動的原理也沒講，小白看了【任務4】一臉懵逼，清除浮動才是最大的后手，不過再Chrome和新版的IE里面不清除浮動Footer也能正常顯示，這課程留一手啊，坑爹啊。

建議開設課程時 可以把每個基本思路先概括一下。Anyway,thank you very much!

.footer{ height:50px; background:#9F9; margin:700px 0 0 0;}結果多了一行空白，margin改成600px就正常了，這margin是怎么算的

.top{height:100px;}
.main{position:absolute;top:100px;bottom:50px;width:100%;}
.left{ width:200px;height:100%; position:absolute;left:0;top:0;}
.right{margin-left:210px;height:100%;}
.foot{height:50px;position:absolute;bottom:0;left:0;width:100%;}
全程自適應

/*
1、寬度自適應：不設置寬度；
2、樣式加載：樣式按從上往下排序，寫在前面的先加載；
3、兼容ie6：不能用浮動float，只能先設置父元素main為相對定位relative作為參照定位，后設置其子元素(right、left)為絕對定位absolute，并設置其具體位置。
*/
/*
1、如不給right設置外邊距margin，則其自適應寬度會與其中的文字同寬；
2、由于left的width為200px，則right的margin-left為210px，因此right與left的間隔為10px；
3、由于right為main的首個子元素，因此默認疊加在main上面，無需設置絕對定位。
*/

.top{width:100%; height:50px;background:gray;}
.main{width:100%; height:400px;background:red;}
.left{width:25%; height:400px;background:blue; float:left;}
.right{width:74%; height:400px;background:green;float:right;}
.foot{width:100%; height:50px;background:yellow;}

.top{height:100px;background:#ccc;}
.main{height:500px;background:red;margin:0 auto;}
.left{width:25%;height:500px;background:blue;float:left;}
.right{width:70%;height:500px;background:green;float:right;}
.foot{height:50px;background:#F63;}