float 浮動有三個用處：
一是使得自身脫離文件流，使得父容器不會受其高度影響(解決方案
二是使得後面的非浮動元素的文字「順流環繞」浮動元素(ie6下可能會引發的問題
三是浮動元素的尺寸，如果未指定將按自身內部元素大小來適應（而不是像塊元素一樣預設的充滿整行）
通常理解下（ie6觸發haslayout除外）浮動就是理解成脫離了文件流，所以如果前面是個浮動元素，後面是個非浮動元素就會出現浮動元素覆蓋了非浮動元素
afadsfadf
上面的**，在ie8和chrome firefox等瀏覽器都是正常的。所謂正常就是浮動元素脫離文件流並按定義的left向左移動到父元素最左邊緣，後面的非浮動元素因為浮動元素不佔據文件流位置也向左移動到父元素最邊緣，這時浮動元素會覆蓋在非浮動元素之上(z-index高於非浮動元素)。
但是在ie6下則不同，浮動元素和非浮動元素像兩個浮動元素（視覺上，實際上不是這個原理）一樣從左至右排列，它並沒有按我們的理解是覆蓋在非浮動元素之上的。
原因就是因為非浮動元素down定義了固定的高和寬，這樣就觸發了ie下獨有的haslayout（觸發條件），這個情況下，非浮動元素就不會忽略左側的浮動元素所應該佔據的空間，所以它會跟著浮動元素之後排列。我們刪除down的width:200px;heigh:200px; 再看，各個瀏覽器下都是一致的表現了（刪除後非浮動元素就沒有觸發haslayout）。
總結一下：元素浮動後會脫離文件流，按照設定的left或者right移向父元素的兩側，浮動元素自身不佔據空間，非浮動元素會忽略其佔據的空間。但是如果是在ie6下，並且相鄰的非浮動元素觸發了haslayout，那麼它將不會忽略浮動元素佔據的空間，浮動元素本應該佔據的位置也會被佔據。
有了綜上所述，我們可以很容易理解下面的 左右自適應寬度布局
left
右列寬度自適應布局
左側會按照本文最頂端的第三條，也就是浮動元素未指定大小會按照內部元素的大小來適應，左側自適應成功（這就是浮動元素的包裹性）
右側因為是塊級元素，他的寬度如果沒有指定應該是預設一行，而現在的一行已經被浮動元素佔據了一些，剩餘的部分瀏覽器也會幫我們計算好
這樣一來，左右布局就成功了。
上面的overflow:hidden我標註的作用是 保護不被覆蓋 我寫的另外2個日誌有解釋
看完這2個日誌，是不是得出乙個結論，就是本文中的 height:1% 功能等同於 overflow:hidden
float 關於使用浮動 和清除浮動
float的特點 1,可以使塊元素在一行顯示 元素浮動後會脫標不佔位 2,可以使元素進行模式轉換.但是,但是,但是 有優點 就一定有缺點.有時候一不留神就會被它的缺點折磨的抓狂.我有次用float給父元素裡的所有子元素都新增了浮動效果,但是沒有給父元素設定高度.結果是 廢話不多說 上圖 是這樣的 我...
float清除浮動
影響 浮動會使元素具有塊級元素和行內元素的特點 即內聯塊的特點 讓塊元素在同一行顯示。內聯塊 inline block 和浮動 float left right none 元素脫離文件流，按照浮動方向移動，遇到父級邊界或者相鄰浮動元素停住 但是無論哪種方式都需要做一些處理 去除inline bloc...
float清除浮動
在非ie瀏覽器下，當容器的高度為auto，且容器的內容中有浮動 float為left或right 的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響 甚至破壞 布局的現象。即父級物件盒子無法被撐開，這個現象叫浮動溢位，為了防止這個現象的出現而進行的css處理，...