一、什麼是浮動
通過設定元素的float值不為none，使得元素按照特定的方向脫離文件流，不佔據空間。浮動元素碰到包含它的父元素的邊框或者浮動元素的邊框停留。設定浮動後的行內元素，可以設定其寬和高。
二、浮動帶來的問題
div1
div2
2. 浮動元素後面的同級非浮動元素會提高，有可能被遮擋（但是div2裡面的文字會環繞在div1的旁邊，不會被遮擋）；
3. 若浮動元素不是同級第乙個元素，其前面的元素非塊級元素會緊隨其後。
4.行內元素設定浮動後，可以設定其寬高
三、清除浮動的方法
清除浮動的方法主要有下面的五種，各有優缺點。
1. 父級元素定義高度
原理：父級元素手動定義height，解決浮動後父級元素無法自動獲取高度的問題。
優點：簡單，**少，容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
評分：★★☆☆☆
2. 結尾處加空div標籤clear:both
原理：新增乙個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單，**少，瀏覽器支援好，不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不爽
評分：★★★☆☆
3. 父級div定義偽類:after和zoom
原理：ie8以上和非ie瀏覽器才支援:after，原理和方法2有點類似，zoom(ie轉有屬性)可解決ie6,ie7浮動問題
缺點：**多，不少初學者不理解原理，要兩句**結合使用，才能讓主流瀏覽器都支援
評分：★★★★☆
4. 父級div定義overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單，**少，瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏
評分：★★★☆☆
5. 父級div定義overflow:auto
原理：與overflow:hidden;一樣
優點：簡單，**少，瀏覽器支援好
缺點：內部寬高超過父級div時，會出現滾動條。
評分：★★☆☆☆
CSS清除浮動的方法及優缺點
浮動是css布局裡面用的比較多的屬性。浮動的框向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。因為浮動會使當前元素產生向上浮的效果，所以浮動的元素會脫離正常的文件流，它包圍的內容在文件流中不佔空間。元素浮動會影響其他元素的布局，那麼浮動會帶來哪些影響呢？1.元素浮動後，父元素的背景...
清除浮動方法及優缺點
方法1 給父級div定義 高度 如下 我是左浮動 我是右浮動 我是div2 原理 通過設定父元素overflow值設定為hidden 在ie6中還需要觸發 haslayout zoom 1 優點 簡介，不存在結構和語義化問題 缺點 無法顯示需要溢位的元素 亦不太推薦使用 方法7父元素設定 overf...
清除浮動的方法及優缺點
為什麼要清除浮動？下面的例子是浮動對元素的影響 lang en charset utf 8 type text css box1 box2 box3 style head class box1 class box2 p div class box3 div body html box2加入float...