? 一、拋一塊問題磚（display： block）先看現象：

? ? 分析HTML代碼結構：

<div?class="outer"><div?class="div1">1</div><div?class="div2">2</div><div?class="div3">3</div> </div>

?????分析CSS代碼樣式：

.outer{border:?1px?solid?#ccc;background:?#fc9;color:?#fff;?margin:?50px?auto;padding:?50px;} .div1{width:?80px;height:?80px;background:?red;float:?left;} .div2{width:?80px;height:?80px;background:?blue;float:?left;} .div3{width:?80px;height:?80px;background:?sienna;float:?left;}

????這里我沒有給最外層的DIV.outer 設置高度，但是我們知道如果它里面的元素不浮動的話，那么這個外層的高是會自動被撐開的。但是當內層元素浮動后，就出現了一下影響：

????（1）：背景不能顯示 （2）：邊框不能撐開 （3）：margin 設置值不能正確顯示

????二、清楚css浮動：

????????????方法一：添加新的元素 、應用 clear：both；

HTML：

<div?class="outer"><div?class="div1">1</div><div?class="div2">2</div><div?class="div3">3</div><div?class="clear"></div> </div>

CSS：

.clear{clear:both;?height:?0;?line-height:?0;?font-size:?0}

result： （糾正： padding不會受影響）

????方法二：父級div定義 overflow: auto（注意：是父級div也就是這里的 ?div.outer）

HTML：

<div?class="outer?over-flow">?//這里添加了一個class<div?class="div1">1</div><div?class="div2">2</div><div?class="div3">3</div><!--<div?class="clear"></div>--> </div>

CSS：

.over-flow{overflow:?auto;?zoom:?1;?//zoom:?1;?是在處理兼容性問題 }

結果：當然是實現了！ ?img{display: none}; 略圖

????原理：使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以，其區據說在于一個對seo比較友好，另個hidden對seo不是太友好，其他區別我就說不上了，也不浪費時間。

????方法三： 據說是最高大上的方法 ?:after 方法：（注意：作用于浮動元素的父親）

????先說原理：這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似于clear:both方法，只是區別在于:clear在html插入一個div.clear標簽，而outer利用其偽類clear:after在元素內部增加一個類似于div.clear的效果。下面來看看其具體的使用方法：

.outer?{zoom:1;}????/*==for?IE6/7?Maxthon2==*/ .outer?:after?{clear:both;content:'.';display:block;width:?0;height:?0;visibility:hidden;}???/*==for?FF/chrome/opera/IE8==*/

????其中clear:both;指清除所有浮動；content: '.'; display:block;對于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清楚浮動。

最后：但不是不重要，也不是不知道！?

????????下一標簽直接清浮動兄弟標簽浮動時，在下一標簽的屬性中直接寫入清除clear:both;這樣就可以清除以上標簽的浮動而不用加入空標簽來清除浮動。

????$('.float').end().結語：清除浮動的方式雖然是有很多種，但是不是每種都適合你，也不是每種都能很好的兼容所有瀏覽器，所以參照你覺得最好的方式去做，個人覺得方法三不錯，不需多于的標簽，而且也能很好的兼容。再次again：當一個內層元素是浮動的時候，如果沒有關閉浮動時，其父元素也就不會再包含這個浮動的內層元素，因為此時浮動元素已經脫離了文檔流。也就是為什么外層不能被撐開了！

總結

以上是生活随笔為你收集整理的css清除浮动float的三种方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。