這篇文章主要講解了“怎么巧妙運用CSS的clear:both清除浮動”,文中的講解內(nèi)容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“怎么巧妙運用CSS的clear:both清除浮動”吧!
目前創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站改版維護、企業(yè)網(wǎng)站設(shè)計、澤州網(wǎng)站維護等服務(wù),公司將堅持客戶導向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
我們在制作網(wǎng)頁中用div+css或者稱xhtml+css都會遇到一些很詭異的情況,明明布局正確,但是整個畫面卻混亂起來了,有時候在IE6下看的很正常的,到ie7或者火狐下看時,就一片混亂了,無論怎么計算,就是不能將排版改正過來。其實,這一切都是浮動搞得鬼,也就是css中的float,要解決情況,就需要使用clear:both了。
CSS手冊上是這樣說明的:該屬性的值指出了不允許有浮動對象的邊。這個屬性是用來控制float屬性在文檔流的物理位置的。
當屬性設(shè)置float(浮動)時,其所在的物理位置已經(jīng)脫離文檔流了,但是大多時候我們希望文檔流能識別float(浮動),或者是希望float(浮動)后面的元素不被float(浮動)所影響,這個時候我們就需要用clear:both;來清除。
程序代碼:
<pstyle="float:left;width:200px;">這個是第1列,</p>
<pstyle="float:left;width:400px;">這個是第2列,</p>
<p>這個是第3列。</p>
如果不用清除浮動,那么第3列文字就會和第1、2列文字在一起,所以我們在第3個這列加一個清除浮動clear:both;
通常,我們往往會將“清除浮動”單獨定義一個CSS樣式,如:
程序代碼
.clear{
clear:both;
}
然后使用<divclass="clear"></div>來專門進行“清除浮動”。
不過也有不贊同意見是,<divclass="clear"></div>可以不寫,直接在下層清除就可以了。
比如本來好好的
程序代碼
<pstyle="float:left;width:200px;">這個是第1列,</p>
<pstyle="float:left;width:400px;">這個是第2列,</p>
<pstyle="clear:both;">這個是第3列。</p>
非要整成
程序代碼
<pstyle="float:left;width:200px;">這個是第1列,</p>
<pstyle="float:left;width:400px;">這個是第2列,</p>
<divclass="clear"></div>
<p>這個是第3列。</p>
這點看來,<divclass="clear"></div>確實不需要寫。
不過很顯然,我們在網(wǎng)頁設(shè)計時還有一種很普遍的情況:
程序代碼
<styletype="text/css">
#main{background-color:#3399CC;width:600px;padding:20px;}
#sidebar{background-color:#FF6600;float:left;width:130px;}
#container{float:right;width:420px;background-color:#FFFF33;}
</style>
<divid="main">
<divid="sidebar">第一段內(nèi)容第一段內(nèi)容第一段內(nèi)容</div>
<divid="container">第二段內(nèi)容第二段內(nèi)容第二段內(nèi)容</div>
</div>
<pstyle="clear:both;">第三段內(nèi)容</p>
該頁面測試在IE下效果正合所要:藍色塊內(nèi)部有紅色和黃色兩個色塊內(nèi)容,同時在藍色塊以下是第三段文本。
不過FF的效果可不是這樣的。我們不能單單想在下一層清除就能完成我們的工作,我們必須在浮動元素所在標簽閉合之前及時進行“清除”。
程序代碼
<styletype="text/css">
#main{background-color:#3399CC;width:600px;padding:20px;}
#sidebar{background-color:#FF6600;float:left;width:130px;}
#container{float:right;width:420px;background-color:#FFFF33;}
.clear{clear:both;}
</style>
<divid="main">
<divid="sidebar">第一段內(nèi)容第一段內(nèi)容第一段內(nèi)容</div>
<divid="container">第二段內(nèi)容第二段內(nèi)容第二段內(nèi)容</div>
<divclass="clear"></div>
</div>
<p>第三段內(nèi)容</p>
對于因多加的<divclass="clear"></div>標簽會引起IE和FF高度變化,通過如下方法解決:
程序代碼
clear{
clear:both;
height:1px;
margin-top:-1px;
overflow:hidden;
}
程序代碼
<styletype="text/css">
#main{background-color:#3399CC;width:600px;padding:20px;}
#sidebar{background-color:#FF6600;float:left;width:130px;}
#container{float:right;width:420px;background-color:#FFFF33;}
.clear{clear:both;height:1px;margin-top:-1px;overflow:hidden;}
</style>
<divid="main">
<divid="sidebar">第一段內(nèi)容第一段內(nèi)容第一段內(nèi)容</div>
<divid="container">第二段內(nèi)容第二段內(nèi)容第二段內(nèi)容</div>
<divclass="clear"></div>
</div>
感謝各位的閱讀,以上就是“怎么巧妙運用CSS的clear:both清除浮動”的內(nèi)容了,經(jīng)過本文的學習后,相信大家對怎么巧妙運用CSS的clear:both清除浮動這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
網(wǎng)頁題目:怎么巧妙運用CSS的clear:both清除浮動
路徑分享:http://bm7419.com/article40/jdipeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計公司、軟件開發(fā)、網(wǎng)站排名、微信小程序、營銷型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站
聲明:本網(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)