對於乙個web前端工程師來說浮動清除是我們的必修課，如何精益求精將**寫到極致，小編覺得我們必須花時間多對比、多揣摩。遍搜網路，清除浮動的方法大致有一以下幾種方法：
方法1：給父級div定義 高度
**如下：
1<
style
type
=」text/css」
>
2.div1
3.div2
4.left
5.right
6< /style>
<div
class
=」div1″
>
<
div
class
=」left」
>我是左浮動
div>
<
div
class
=」right」
>我是右浮動
div>
div>
<
div
class
=」div2″
>我是div2
div>
原理：給父級div定義固定高度（height），能解決父級div 無法獲取高度得問題。
優點：**簡潔
缺點：高度被固定死了，是適合內容固定不變的模組。（不推薦使用）
方法2：div閉合處，加
(.clear)
**如下：
1<
div
class
=」div1″
>
2<
div
class
=」left」
>我是左浮動
div>
3<
div
class
=」right」
>我是右浮動
div>
4<
div
class
=」clear」
>
div>
5div
>
6<
div
class
=」div2″
>我是div2
div>
原理：新增一對空的div標籤，利用css的clear:both屬性清除浮動，讓父級div能夠獲取高度。
優點：瀏覽器支援好
缺點：多出了很多空的div標籤，如果頁面中浮動模組多的話，就會出現很多的空置div了，這樣感覺視乎不是太令人滿意。（不推薦使用）
方法3：結尾處加 br標籤
(.clear)
**如下：
1<
div
class
=」div1″
>
2<
div
class
=」left」
>我是左浮動
div>
3<
div
class
=」right」
>我是右浮動
div>
4<
br class
=」clear」
/>
5div
>
6<
div
class
=」div2″
>我是div2
div>
原理及有優缺點同方法2，可做了解，亦不推薦使用。
方法4：讓父級div 也一併浮起來
這樣做可以初步解決當前的浮動問題。但是也讓父級浮動起來了，又會產生新的浮動問題。 不推薦使用
方法5：父級div定義 display:table
方法6父元素設定 overflow：hidden；
1<
style
type
=」text/css」
>
2.div1
3.div2
4.left
5.right
6style
>78
<
div
class
=」div1″
>
9<
div
class
=」left」
>我是左浮動
div>
10<
div
class
=」right」
>我是右浮動
div>
11div
>
12<
div
class
=」div2″
>我是div2
div>
原理：通過設定父元素overflow值設定為hidden；在ie6中還需要觸發 haslayout（zoom：1）
優點：**簡介，不存在結構和語義化問題
缺點：無法顯示需要溢位的元素（亦不太推薦使用）
方法7父元素設定 overflow：auto；
原理：原理同方法6，在ie6中還需要觸發 haslayout（zoom：1）
優點：**簡介，不存在結構和語義化問題
缺點：firefox早期版本會無故產生focus，多個巢狀後，firefox某些情況會造成內容全選；ie中 mouseover 造成寬度改變時會出現最外層模組有滾動條等。
方法8：父級div定義 偽類:after 和 zoom
**如下：
1<
style
type
=」text/css」
>
2.div1
3.div2
4.left
5.right
6.clearfix:after
7.clearfix
8style
>910
<
div
class
=」div1
clearfix」
>
11<
div
class
=」left」
>我是左浮動
div>
12<
div
class
=」right」
>我是右浮動
div>
13div
>
14<
div
class
=」div2″
>我是div2
div>
原理：ie8以上和非ie瀏覽器才支援:after，原理和方法2有點類似，zoom(ie轉有屬性)可解決ie6,ie7浮動問題
優點：結構和語義化完全正確,**量也適中，可重複利用率（建議定義公共類）
缺點：**不是非常簡潔（極力推薦使用）
本方法進益求精寫法
相對於空標籤閉合浮動的方法**似乎還是有些冗餘，通過查詢發現unicode字元裡有乙個「零寬度空格」，也就是u+200b，這個字元本身是不可見的，所以我們完全可以省略掉 visibility:hidden了
.clearfix:after
.clearfix 照顧ie6，ie7就可以了
清除浮動方法及優缺點
方法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...
CSS清除浮動方法及優缺點分析
一 什麼是浮動 通過設定元素的float值不為none，使得元素按照特定的方向脫離文件流，不佔據空間。浮動元素碰到包含它的父元素的邊框或者浮動元素的邊框停留。設定浮動後的行內元素，可以設定其寬和高。二 浮動帶來的問題 div1 div2 1.父元素的高度塌陷 2.浮動元素後面的同級非浮動元素會提高，...