什么是浮動
浮動，故名思議，就是移動位置。
之所以不叫移動，而叫浮動，那是因為給元素設置浮動后，元素會浮到文檔上面來，術語叫脫離文檔流。
例子
下面我們看例子
<html><head><style>#div0 {/* 設置背景色為黃色 */background-color:yellow;/* 設置邊框為1px的線條 */border:1px solid;/* 設置寬度為800px */width:800px;}#div1, #div2 {/* 設置寬度為300px */width:300px;/* 設置高度為300px */height:300px;/* 設置邊框為1px的線條 */border:1px solid;}#div1 {/* 設置背景色為灰色 */background-color:#888;}#div2 {/* 設置背景色為藍色 */background-color:#08c;}</style></head><body><div id="div0"><div id="div1"></div><div id="div2"></div></div></body></html>
有三個div，其中一個大的#div0，里面含有兩個子div，#div1和#div2。
可以看到，大的黃色#div0，嵌套了一個灰色的#div1和一個藍色的#div2。
由於div是塊級元素，所以灰色和黃色的div不會在同一排顯示。
測試1
這個時候，我們給#div1，設置右浮動。
#div1 {/* 設置背景色為灰色 */background-color:#888;/* 右浮動 */float:right;}
這個時候，可以看到，灰色的#div1到右邊去了。
而黃色#div0的高度，只有一半了。
這是因為，當#div1浮動到右邊后，它就脫離文檔流了，來到文檔的上方，也就是和原來的#div0、#div2不在同一個層面上了。
這時候，#div0的高度，就等於是現在還在同一層面上#div2的高度。
測試2
我們再給#div2做個左浮動
#div2 {/* 設置背景色為藍色 */background-color:#08c;/* 左浮動 */float:left;}
發現#div0居然不見了，但是可以圖片頂部，出現#div0的邊框。
這是由於，#div1和#div2都設置了浮動，它們都脫離了文檔流，和#div0不在同一個層面上了。
也就是#div0里面沒有了內容，就坍塌的只剩下邊框了。
測試三
如果你需要#div0也有一個高度 ，剛好能包裹着浮動的子元素，那么你可以給#div0也設置一個浮動，這樣他們就又在同一個層面上了。
#div0 {/* 設置背景色為黃色 */background-color:yellow;/* 設置邊框為1px的線條 */border:1px solid;/* 左浮動 */float:left;}