本篇內(nèi)容介紹了“CSS清除浮動的方法”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
創(chuàng)新互聯(lián)一直秉承“誠信做人,踏實做事”的原則,不欺瞞客戶,是我們最起碼的底線! 以服務(wù)為基礎(chǔ),以質(zhì)量求生存,以技術(shù)求發(fā)展,成交一個客戶多一個朋友!為您提供網(wǎng)站制作、做網(wǎng)站、成都網(wǎng)頁設(shè)計、小程序設(shè)計、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、app軟件開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計公司,等你一起來見證!
CSS清除浮動的另一種別致的方法
在進行浮動布局時,大多數(shù)人都深知,在必要的地方進行浮動清理:
<div></div>。
例如:
ExampleSourceCode
<divstyledivstyle="background:#666;"> <divstyledivstyle="float:left;width:30%;height:40px;background:#EEE;">SomeContentdiv> div>
此時預(yù)覽此代碼,我們會發(fā)現(xiàn)最外層的父元素floatcontainer,并沒有顯示。這是因為子元素因進行了浮動,而脫離了文檔流,導(dǎo)致父元素的height為零。
若將代碼修改為:
ExampleSourceCode
<divstyledivstyle="background:#666;"> <divstyledivstyle="float:left;width:30%;height:40px; background:#EEE;">SomeContentdiv> <divstyledivstyle="clear:both">div> div>
注意,多了一段清理浮動的代碼。這是一種好的CSS代碼習(xí)慣,但是這種方法增加了無用的元素。這里有一種更好的方法,將HTML代碼修改為:
ExampleSourceCode
<divclassdivclass="clearfix"style="background:#666;"> <divstyledivstyle="float:left;width:30%;height:40px; background:#EEE;">SomeContentdiv> div>
◆定義CSS類,進行“浮動清理”的控制:
ExampleSourceCode
.clearfix:after{}{ content:"."; clear:both; height:0; visibility:hidden; display:block; } /*這是對Firefox進行的處理,因為Firefox支持生成元素,而IE所有版本都不支持生成元素*/ .clearfix{}{ display:inline-block; } /*這是對Mac上的IE瀏覽器進行的處理*/ /**//*HidesfromIE-mac\*/ *html.clearfix{}{height:1%;} /*這是對win上的IE瀏覽器進行的處理*/ .clearfix{}{display:block;} /*這是對display:inline-block;進行的修改,重置為區(qū)塊元素*/ /**//*EndhidefromIE-mac*/
此時,預(yù)覽以上代碼(刪去這種注釋),會發(fā)現(xiàn)即使子元素進行了浮動,父元素floatcontainer仍然會將其包圍,進行高度自適應(yīng)。
“CSS清除浮動的方法”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
網(wǎng)站標(biāo)題:CSS清除浮動的方法
網(wǎng)站地址:http://bm7419.com/article44/goidhe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、網(wǎng)站改版、、自適應(yīng)網(wǎng)站、搜索引擎優(yōu)化、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)