三列布局，中間自適應，嘗試了兩種方法
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方法。清除浮動絕對是個大問題，接下來也會繼續學習。