? 一、拋一塊問(wèn)題磚（display： block）先看現(xiàn)象：

? ? 分析HTML代碼結(jié)構(gòu)：

<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;}

????這里我沒(méi)有給最外層的DIV.outer 設(shè)置高度，但是我們知道如果它里面的元素不浮動(dòng)的話，那么這個(gè)外層的高是會(huì)自動(dòng)被撐開的。但是當(dāng)內(nèi)層元素浮動(dòng)后，就出現(xiàn)了一下影響：

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

????二、清楚css浮動(dòng)：

????????????方法一：添加新的元素 、應(yīng)用 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不會(huì)受影響）

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

HTML：

<div?class="outer?over-flow">?//這里添加了一個(gè)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;?是在處理兼容性問(wèn)題 }

結(jié)果：當(dāng)然是實(shí)現(xiàn)了！ ?img{display: none}; 略圖

????原理：使用overflow屬性來(lái)清除浮動(dòng)有一點(diǎn)需要注意，overflow屬性共有三個(gè)屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來(lái)清除浮動(dòng)，但切記不能使用visible值，如果使用這個(gè)值將無(wú)法達(dá)到清除浮動(dòng)效果，其他兩個(gè)值都可以，其區(qū)據(jù)說(shuō)在于一個(gè)對(duì)seo比較友好，另個(gè)hidden對(duì)seo不是太友好，其他區(qū)別我就說(shuō)不上了，也不浪費(fèi)時(shí)間。

????方法三： 據(jù)說(shuō)是最高大上的方法 ?:after 方法：（注意：作用于浮動(dòng)元素的父親）

????先說(shuō)原理：這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)，他就是利用:after和:before來(lái)在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。其實(shí)現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽，而outer利用其偽類clear:after在元素內(nèi)部增加一個(gè)類似于div.clear的效果。下面來(lái)看看其具體的使用方法：

.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;指清除所有浮動(dòng)；content: '.'; display:block;對(duì)于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來(lái)，這樣才能實(shí)現(xiàn)清楚浮動(dòng)。

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

????????下一標(biāo)簽直接清浮動(dòng)兄弟標(biāo)簽浮動(dòng)時(shí)，在下一標(biāo)簽的屬性中直接寫入清除clear:both;這樣就可以清除以上標(biāo)簽的浮動(dòng)而不用加入空標(biāo)簽來(lái)清除浮動(dòng)。

????$('.float').end().結(jié)語(yǔ)：清除浮動(dòng)的方式雖然是有很多種，但是不是每種都適合你，也不是每種都能很好的兼容所有瀏覽器，所以參照你覺(jué)得最好的方式去做，個(gè)人覺(jué)得方法三不錯(cuò)，不需多于的標(biāo)簽，而且也能很好的兼容。再次again：當(dāng)一個(gè)內(nèi)層元素是浮動(dòng)的時(shí)候，如果沒(méi)有關(guān)閉浮動(dòng)時(shí)，其父元素也就不會(huì)再包含這個(gè)浮動(dòng)的內(nèi)層元素，因?yàn)榇藭r(shí)浮動(dòng)元素已經(jīng)脫離了文檔流。也就是為什么外層不能被撐開了！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。