三列布局，中間自適應，關於float和positon方法

三列布局，中間自適應，嘗試了兩種方法
float
.mydiv{

background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
overflow: auto;

}

.left {

float: left;
width: 160px;
height: 100px;
background: blue;
padding: 20px;

}

.right{

float: right;
width: 80px;
height: 300px;
background: blue;
padding: 20px;

}

.middle{

margin-left: 220px;
margin-right: 140px;
background: red;
height: 200px;
padding: 20px;

}
.clearfix{

clear: both;

}
看到一篇文章：http://www.barelyfitz.com/screencast/html-training/css/positioning/，裏面有這麼一句話：
We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it.
「wrap around it」很是重要，float與absolute有相似的功能，在這一點上卻大不相同，下面會講到。

---

position

mydiv{

background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
position: relative;

}

left {

position: absolute;
left: 20px;
width: 160px;
height: 100px;
padding: 20px;

}

right{

position: absolute;
right: 20px;
width: 80px;
height: 260px;
padding: 20px;/*absolute已經脫離文檔流，沒法撐開父元素;*/

}

middle{

margin-left: 220px;
margin-right: 140px;
height: 200px;
padding: 20px;

}
須要設置父元素爲relative，子元素的absolute纔會相對於父元素絕對定位。
這種方法的侷限性在於，必須設置父元素的高度爲固定，由於absolute的子元素已經脫離文檔流，不能撐開父元素，或者會遮蓋同級的兄弟元素。
也就是說這種方法不能自適應高度佈局。對於子元素高度不肯定的狀況這種方法也就不能使用了。固然用js腳本進行控制也能夠。

---

關於absolute和float區別。
absolute是徹底脫離文檔流，兩個設置了absolute的元素甚至均可以互相覆蓋。
而關於float，W3C手冊中有這麼一句話：因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。
對於普通流中的塊框不存在，也就是說對於float元素、文檔中的行內元素，浮動元素是存在的。表達有點晦澀？？？具體的說，float:left遇到float:left,會停下來並排顯示而不是覆蓋。而對於行內元素：圖片和文字，會「wrap around it」，就是包圍float元素。

可是float和absolute都會出現沒法撐開父元素的問題：
這時候absolute就比較雞肋了，在多欄不肯定高度的佈局中，absolute沒有辦法解決父元素自適應高度的問題（參考：http://www.barelyfitz.com/screencast/html-training/css/positioning/）而float能夠有一些清除float的方法，上面採用了overflow: auto;和.clearfix方法。清除浮動絕對是個大問題，接下來也會繼續學習。