本篇文章為大家展示了怎么在CSS中使用偽元素清除浮動,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為托克遜企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、網(wǎng)站建設(shè),托克遜網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
1.行內(nèi)樣式,最直接最簡單的一種,直接對HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式,就是將CSS代碼寫在之間,并且用
進(jìn)行聲明。3.外部樣式,其中鏈接樣式是使用頻率最高,最實用的樣式,只需要在之間加上
就可以了。其次就是導(dǎo)入樣式,導(dǎo)入樣式和鏈接樣式比較相似,采用@import樣式導(dǎo)入CSS樣式表,不建議使用。BFC概念:
塊級格式化上下文,是一個獨立的渲染區(qū)域,讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離,使內(nèi)外元素的定位不會相互影響。
我們先了解一個名詞:BFC(block formatting context),中文為“塊級格式化上下文”。
先記住一個原則: 如果一個元素具有BFC,那么內(nèi)部元素再怎么翻江倒海,翻云覆雨,都不會影響外面的元素。所以,BFC元素是不可能發(fā)生margin重疊的,因為margin重疊會影響外面的元素的;BFC元素也可以用來清除浮動帶來的影響,因為如果不清除,子元素浮動則會造成父元素高度塌陷,必然會影響后面元素的布局和定位,這顯然有違BFC元素的子元素不會影響外部元素的設(shè)定。
以下情況會觸發(fā)BFC:
•<html>根元素
•float的值不為none
•overflow的值為auto,scroll,hidden
•display的值為table-cell,table-caption和inline--block中的任何一個
•position的值不為relative和static 即 position: absolute/fixed
顯然我們在設(shè)置overflow值為hidden時使container元素具有BFC,那么子元素child浮動便不會帶來父元素的高度坍塌影響。
利用偽類元素清除浮動:
.clearFix::after,.clearFix::before { display: block; content: ''; clear: both; visibility: hidden; height: 0; } .clearFix { zoom: 1;}
上述內(nèi)容就是怎么在CSS中使用偽元素清除浮動,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站名稱:怎么在CSS中使用偽元素清除浮動
當(dāng)前地址:http://bm7419.com/article14/phddde.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、搜索引擎優(yōu)化、、網(wǎng)站設(shè)計、企業(yè)建站、定制網(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)