1.分析HTML代碼

 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;}
分析問(wèn)題：外層未設(shè)置高度，如果里面元素不設(shè)置float的話(huà)，外層容器的高度會(huì)隨內(nèi)層元素高度撐開(kāi)，因?yàn)樵O(shè)置float之后內(nèi)層元素脫離文檔流，導(dǎo)致高度無(wú)法撐開(kāi)
 （1）背景不能顯示 （2）邊框不能撐開(kāi) （3）margin設(shè)置值不能正確顯示
2.清除浮動(dòng)
 方法一：添加新元素 應(yīng)用clear：both
 html:
1 div >
 css:
 {:;:;:;:}
 方法二：父級(jí)div定義overflow:auto
 html:
 div >
css:
.over-flow{overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問(wèn)題}
原理：使用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è)值都可以.
方法三：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)原理類(lèi)似于clear:both方法，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽，而outer利用其偽類(lèi)clear:after在元素內(nèi)部增加一個(gè)類(lèi)似于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)。
以上就是css清除浮動(dòng)float的一些方法的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。