本篇內(nèi)容介紹了“CSS清除浮動(dòng)的方法”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供網(wǎng)站制作、做網(wǎng)站、成都網(wǎng)頁(yè)設(shè)計(jì)、小程序設(shè)計(jì)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、app軟件開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來(lái)見證！

CSS清除浮動(dòng)的另一種別致的方法

在進(jìn)行浮動(dòng)布局時(shí)，大多數(shù)人都深知，在必要的地方進(jìn)行浮動(dòng)清理：

<div></div>。

例如：

ExampleSourceCode

<divstyledivstyle="background:#666;"> <divstyledivstyle="float:left;width:30%;height:40px;background:#EEE;">SomeContentdiv> div>

此時(shí)預(yù)覽此代碼，我們會(huì)發(fā)現(xiàn)最外層的父元素floatcontainer,并沒有顯示。這是因?yàn)樽釉匾蜻M(jìn)行了浮動(dòng)，而脫離了文檔流，導(dǎo)致父元素的height為零。

若將代碼修改為：

ExampleSourceCode

<divstyledivstyle="background:#666;"> <divstyledivstyle="float:left;width:30%;height:40px;  background:#EEE;">SomeContentdiv> <divstyledivstyle="clear:both">div> div>

注意，多了一段清理浮動(dòng)的代碼。這是一種好的CSS代碼習(xí)慣，但是這種方法增加了無(wú)用的元素。這里有一種更好的方法，將HTML代碼修改為：

ExampleSourceCode

<divclassdivclass="clearfix"style="background:#666;">  <divstyledivstyle="float:left;width:30%;height:40px;  background:#EEE;">SomeContentdiv> div>

◆定義CSS類，進(jìn)行“浮動(dòng)清理”的控制：

ExampleSourceCode

.clearfix:after{}{  content:".";  clear:both;  height:0;  visibility:hidden;  display:block;  }  /*這是對(duì)Firefox進(jìn)行的處理，因?yàn)镕irefox支持生成元素，而IE所有版本都不支持生成元素*/  .clearfix{}{  display:inline-block;  }  /*這是對(duì)Mac上的IE瀏覽器進(jìn)行的處理*/  /**//*HidesfromIE-mac\*/  *html.clearfix{}{height:1%;}  /*這是對(duì)win上的IE瀏覽器進(jìn)行的處理*/  .clearfix{}{display:block;}  /*這是對(duì)display:inline-block;進(jìn)行的修改，重置為區(qū)塊元素*/  /**//*EndhidefromIE-mac*/

此時(shí)，預(yù)覽以上代碼(刪去這種注釋)，會(huì)發(fā)現(xiàn)即使子元素進(jìn)行了浮動(dòng)，父元素floatcontainer仍然會(huì)將其包圍，進(jìn)行高度自適應(yīng)。

“CSS清除浮動(dòng)的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)站標(biāo)題：CSS清除浮動(dòng)的方法
網(wǎng)站地址：http://chinadenli.net/article44/goidhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版、、自適應(yīng)網(wǎng)站、搜索引擎優(yōu)化、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)