css怎么利用:after清除浮動

這篇文章主要介紹css怎么利用:after清除浮動，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

十余年的鄂州網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整鄂州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“鄂州網(wǎng)站設(shè)計”,“鄂州網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

css的三種引入方式

1.行內(nèi)樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

方法：首先使用“父元素:after{content:'';display:block;}”語句在父元素底部插入并顯示一個空的元素塊；然后給該元素塊添加“clear:both;”樣式即可清除所有浮動。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

什么時候需要清除浮動？清除浮動有哪些方法？

1、對元素進行了浮動（float）后，該元素就會脫離文檔流，浮動在文檔之上。在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

float主要流行與頁面布局，然后在使用后沒有清除浮動，就會后患無窮。

先看實例：

<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; float:left; }
.div2{ width:80px; height:80px; background:blue; float:left; }
.div3{ width:80px; height:80px; background:sienna; float:left; }

如上圖所示，是讓1、2、3這三個元素產(chǎn)生浮動所造成的現(xiàn)象。

下面看一下，如果這三個元素不產(chǎn)生浮動，會是什么樣子?

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; /*float:left;*/ }
.div2{ width:80px; height:80px; background:blue;/* float:left; */}
.div3{ width:80px; height:80px; background:sienna;/* float:left;*/ }

如上圖所示，當內(nèi)層的1/2/3元素不浮動，則外層元素的高是會被自動撐開的。

所以當內(nèi)層元素浮動的時候，就出現(xiàn)以下影響：

背景不能顯示；邊框不能撐開；margin設(shè)置值不能正確顯示。

2、清除浮動-----:after方法。（注意：作用于浮動元素的父親）

原理：利用:after和:before來在元素內(nèi)部插入兩個元素塊，從而達到清除浮動的效果。其實現(xiàn)原理類似于<div style="clear:both;
"></div>方法，只是區(qū)別在于:clear在html中插入一個div.clear標簽，而outer利用其偽類clear:after在元素內(nèi)部增加一個類似于div.clear的效果。

.outer { zoom:1; } /*為了兼容性，因為ie6/7不能使用偽類，所以加上此行代碼。*/
.outer:after { content:'';clear:both;display:block;width:0;height:0;visibility:hidden; }

其中clear:both;指清除所有浮動；content:' . '；display:block; 對于FF/Chrome/opera/IE8不能缺少，其中content()取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現(xiàn)清除浮動。

利用偽元素，就可以不再HTML中加入標簽。

:after 的意思是再.outer內(nèi)部的最后加入為元素:after，

首先要顯示偽元素，所以display:block，

然后為偽元素加入空內(nèi)容，以便偽元素中不會有內(nèi)容顯示在頁面中，所以， content:""；

其次，為使偽元素不影響頁面布局，將偽元素高度設(shè)置為0，所以width:0， height:0，（可省略）

最后，要清除浮動，所以，clear:both。

tips:

content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容。

以上是“css怎么利用:after清除浮動”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標題：css怎么利用:after清除浮動
文章分享：http://muchs.cn/article0/ghgooo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、營銷型網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、App開發(fā)、企業(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)