浮動是css布局裡面用的比較多的屬性。浮動的框向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
因為浮動會使當前元素產生向上浮的效果，所以浮動的元素會脫離正常的文件流，它包圍的內容在文件流中不佔空間。元素浮動會影響其他元素的布局，那麼浮動會帶來哪些影響呢？
1. 元素浮動後，父元素的背景不能顯示；
2. 父元素邊框不能被撐開，即父元素高度塌陷（因為父元素的高消失，當元素沒有高度時就會有塌陷）；
3. margin 設定值不能正確顯示；
4. 兄弟元素的位置受到影響；
注：如果浮動元素後面是塊元素，會與浮動元素重疊，但其在文件流中的相對垂直位置不會改變，因為文件流中塊級元素是獨佔一整行的。如果浮動元素後面是行內元素，則會併排顯示（若設定了元素的寬度，並且螢幕放不下時會換行顯示）。
為了使元素表現的跟浮動之前一樣，布局不受影響，就需要清除浮動來解決這些問題，我根據自己的經驗總結了以下幾種清除浮動的方法：
html**：
<div
class
=」outer」
>
<
div
class
=」left」
>左浮動
div>
<
div
class
=」right」
>右浮動
div>
div>
方法一：給父元素 .outer 定義 height
給父元素手動定高，就解決了父元素不能自動獲取高度的問題。
優點：簡單，**少，容易掌握
缺點：需要給出具體的高度值，所以只適合高度固定的布局
方法二：浮動元素同級末尾處新增空div標籤
浮動元素末尾新增乙個空標籤，利用css clear:both 清除浮動，讓父元素能自動獲取高度
優點：簡單，瀏覽器支援好，不容易出問題
缺點：**不夠優雅，如果頁面浮動布局多，要增加很多無語義的空標籤，易造成結構的混亂，後期不易維護
方法三：父級定義偽元素 :after 和 zoom
利用偽元素:after的css clear:both 清除浮動，原理同方法二，通過偽元素在元素最後定義乙個空的內容。這種方法很多大型**都有使用，可以定義公共樣式，以減少 css **。
優點：瀏覽器支援好，不容易出問題
缺點：**多，要兩句結合使用。
.outer /*為了相容ie
*/.outer:after
方法四：使用雙偽元素 :after :before 清除浮動
方法三的改版，bootstrap 中使用了此方法。
.outer:before,.outer:after .outer:after .outer
方法五：父元素定義 overflow:hidden 或 overflow:auto
使用 overflow:hidden 時，瀏覽器會自動檢查浮動區域的高度。在ie6中，需為父元素定義 width 或 zoom:1
優點：簡單，**少，瀏覽器支援好
缺點：內容寬高超出這個父元素所在的區域會被隱藏或出現滾動條
其他：1. 給父元素新增浮動
給父級也新增浮動屬性也可清除內部浮動，但是這樣會使其整體浮動，影響布局，需要一直浮動到 body 元素，也會產生新的浮動問題，不推薦使用
2.給父級新增 display: table;
這種方法改變了盒子模型，不建議使用
以上，是我對浮動相關知識的見解和總結，如有不足之處，希望各位可以指正，謝謝~~
CSS清除浮動方法及優缺點分析
一 什麼是浮動 通過設定元素的float值不為none，使得元素按照特定的方向脫離文件流，不佔據空間。浮動元素碰到包含它的父元素的邊框或者浮動元素的邊框停留。設定浮動後的行內元素，可以設定其寬和高。二 浮動帶來的問題 div1 div2 1.父元素的高度塌陷 2.浮動元素後面的同級非浮動元素會提高，...
清除浮動方法及優缺點
方法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...