這篇文章主要介紹了css中after偽類清除浮動(dòng)的案例分析，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),天全企業(yè)網(wǎng)站建設(shè),天全品牌網(wǎng)站建設(shè),網(wǎng)站定制,天全網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,天全網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

首先大家要了解什么是css浮動(dòng)？

使元素脫離文檔流，按照指定方向發(fā)生移動(dòng)，遇到父級(jí)邊界或者相鄰的浮動(dòng)元素停了下來(lái)。

也可以這樣理解：浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

那么我們?yōu)槭裁匆?strong>清除浮動(dòng)呢？

這是因?yàn)楦?dòng)元素有時(shí)會(huì)影響整體的布局，產(chǎn)生一些bug。

如下代碼：

    



    
demo1
    
demo2

效果如下圖：

圖中可以看到我們?cè)诮odemo1.2設(shè)置浮動(dòng)屬性float:left后，沒(méi)有將父div撐開(kāi)的情況。而且我們并沒(méi)有給demo設(shè)置寬高尺寸。

這里大家就先要了解css中浮動(dòng)屬性是什么？

float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。

那么當(dāng)我們遇到一些影響布局的浮動(dòng)怎么清除呢？

下面就給大家介紹最主流的清除方法，使用cssafter偽類。

添加以下代碼即可：

.demo:after{
    clear: both;
    content: '';
    display: block;
}

最終效果如下：

其實(shí)主要原理就是：

利用:after和:before在元素內(nèi)插入兩個(gè)元素塊，從而達(dá)到清除浮動(dòng)的效果。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css中after偽類清除浮動(dòng)的案例分析內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

當(dāng)前名稱：css中after偽類清除浮動(dòng)的案例分析-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/dcgpsd.html