前兩天在使用float的時候，有一點難受，為什麼呢，因為發現clear的清除效果不穩定，所以找了這篇部落格學習一下，發現了乙個重要的內容，-------clear是應用於父級元素的。這是癥結所在（有點懊惱自己沒好好讀書導致記錯了），不過，發現的這篇好文章，也是一大幸事。
我們先來回憶一下float的特徵：
1）塊在一排顯示
2）內聯支援寬高
3）預設內容撐開寬度
4）脫離文件流
5）提公升層級半層
由於float浮動脫離文件流，那麼就很容易產生各種相容性和由於浮動產生的視覺效果上的差別。接下來我們分析幾種主要的解決方法。大家最熟悉的方法應該就是新增空標籤，然後利用clear來清除浮動，其實方法很多，但是不是每種都適合我們所遇到的情況，也不是每種都能很好的相容所有瀏覽器，所以需要選擇適當的方法去解決這個由於浮動所產生的問題。
一、下面幾個是計較傳統的幾種清浮動的方法，但是在目前的使用中還是有些問題
1、加高度 (擴充套件性不好)
如果是通過加高度進行清浮動的話，那麼就意味著在設計的過程中，高度是固定的，這樣就無法自適應那些需要自適應高度的情況，擴充套件性不好。
比如：
顯示結果如下，外面的div無法包住裡面的div，如果通過給外面的div新增高度的話，就意味著裡面的內容無法自適應高度，這樣的話，擴充套件性不好。
2、給父級加浮動 (頁面中所有元素都加浮動，margin左右自動失效（floats bad ！）)
3 、.inline-block 清浮動方法 (margin左右auto失效)
4、空標籤清除浮動 (ie6 最小高度 19px；（解決後ie6下還有2px偏差）)
5、.br清浮動 (不符合工作中：結構、樣式、行為，三者分離的要求)
即新增下面這條語句在裡面的div後面：
二、目前常用的三種清浮動方法，也是比較有效的方法
先拋一塊問題磚（display： block）：
我們本意是想讓三個div靠左顯示，並且是在第乙個div中，但是現在的效果是邊框沒有被撐開，margin值不能正常顯示。所以可以採用以下幾種方法進行解決。
1、新增新的元素 、應用 clear：both；
html：
123css:
.clear.box原理：使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以，其區別據說在於乙個對seo比較友好，另個hidden對seo不是太友好。
3、據說是現在主流的方法 :after 方法：（注意：作用於浮動元素的父親）
原理：這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似於clear:both方法，只是區別在於:clear在html插入乙個div.clear標籤，而box利用其偽類clear:after在元素內部增加乙個類似於div.clear的效果。
html:
123css：
.clearfix.clearfix:after1）after偽類： 元素內部末尾新增內容；
:after ie6，7下不相容
2）zoom 縮放
a、觸發 ie下 haslayout，使元素根據自身內容計算寬高。
b、ff 不支援；
其中clear:both;指清除所有浮動；content: '.'; display:block;對於ff/chrome/opera/ie8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清楚浮動。
最終的效果圖：
CSS如何消除浮動
當我們布局網頁一般是先分成乙個乙個div區域，再逐一雕琢。但div預設行為 寬100 多個div從上到下 在一些場景卻不太適合，需要搭配float使用。浮動 float,浮動會脫離預設的文件流，浮動層和預設文件層就好像ps工具中的兩個圖層，互相不搭理 如果div容器不設定width 寬度由預設100...
CSS清除浮動（Float）
我們換一種方法表達上面的意思，因為紅色方塊的 左側浮動 才導致藍色方塊上移至紅色方塊的尾後 在上個例子中，為了達到瀏覽器相容性，我們分別在紅色藍色方塊css 中分別加了 float left 這樣ie和ff中顯示效果一樣，如果此時我們還想放乙個寬度400畫素，高度100的綠色方塊，並讓其處於第二行，...
css清除浮動float
css清除浮動float 1.分析html 123 分析css 樣式 outer.div1.div2.div3分析問題 外層未設定高度，如果裡面元素不設定float的話，外層容器的高度會隨內層元素高度撐開，因為設定float之後內層元素脫離文件流，導致高度無法撐開 1 背景不能顯示 2 邊框不能撐開...