摘要：css清除浮動float的三種方法總結(jié)，為什么要清除浮動？浮動會有哪些影響？

一.先看現(xiàn)象（display：block）

分析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 soild #ccc;background:#fcg;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}

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

（1）背景不能顯示；（2）邊框不能撐開；（3）margin設(shè)置值不能正常的顯示。

二.清楚css浮動

方法一：添加新的元素，應(yīng)用clear：both；
HTML代碼：
<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
css：
.clear{clear:both;height:0;line-height:0;font-size:0}
result:（糾正：padding不會受影響）

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

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

   原理：使用overflow屬性來清除浮動有一點(diǎn)需要注意，overflow屬性共有三個屬性屬性值：hidden，auto，visible。我們可以使用hidden和auto值來清除浮動，但是切記不能使用visible，如果是用這個值無法達(dá)到清除浮動效果，其他的兩個值都可以。

方法三：after方法（主義：作用于浮動元素的父級）

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

.outer{zoom:1;} .outer:after{clear:both;content:".";display:block;width:0;height:0;visibility:hidden;}
其中clear：both指清楚所有浮動；content：".";display:block;對于FF/chrome/opera/IE8不能缺少。其中content（）可以取值也可以為空。visibility：hidden的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實(shí)現(xiàn)浮動。

總結(jié)：
清除浮動的方式有很多種，但是不是每種都適合你，也不是每種都能很好的兼容所有瀏覽器，所以參照你覺得最好的方式去做，個人覺得方法三不錯，不需要多余的標(biāo)簽，而且也能很好的兼容。主義：當(dāng)一個內(nèi)層元素是浮動時(shí)，如果沒有關(guān)閉浮動，其父級元素也就不會在包含這個浮動的內(nèi)層元素，因?yàn)榇藭r(shí)浮動元素已經(jīng)脫離了文檔流。也就是為什么外層不能被撐開了。