css使用偽元素清除浮動的方法介紹

今天小編分享的是關(guān)于css使用偽元素清除浮動的方法介紹，可能大家對css中的偽元素并不陌生，或者從來沒有了解過css中的偽元素。但是不用擔(dān)心，今天小編會以最簡單的描述來講解css使用偽元素清除浮動的方法。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供云巖網(wǎng)站建設(shè)、云巖做網(wǎng)站、云巖網(wǎng)站設(shè)計(jì)、云巖網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、云巖企業(yè)網(wǎng)站模板建站服務(wù)，10年云巖做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

css使用偽元素清除浮動的方法介紹

什么是BFC？

塊級格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會相互影響。

我們先了解一個(gè)名詞：BFC（block formatting context），中文為“塊級格式化上下文”。

先記住一個(gè)原則：

如果一個(gè)元素具有BFC,那么內(nèi)部元素再怎么翻江倒海，翻云覆雨，都不會影響外面的元素。所以，BFC元素是不可能發(fā)生margin重疊的，因?yàn)閙argin重疊會影響外面的元素的；BFC元素也可以用來清除浮動帶來的影響，因?yàn)槿绻磺宄釉馗觿t會造成父元素高度塌陷，必然會影響后面元素的布局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設(shè)定。

以下情況會觸發(fā)BFC:

?<html>根元素
?float的值不為none
?overflow的值為auto，scroll，hidden
?display的值為table-cell，table-caption和inline--block中的任何一個(gè)
?position的值不為relative和static 即 position: absolute/fixed

顯然我們在設(shè)置overflow值為hidden時(shí)使container元素具有BFC，那么子元素child浮動便不會帶來父元素的高度坍塌影響。

利用偽類元素清除浮動：

.clearFix::after,.clearFix::before {
       display: block;
      content: '';
      clear: both;
      visibility: hidden;
      height: 0;
}
.clearFix { zoom: 1;}

以上就是css使用偽元素清除浮動的方法介紹做了簡略的介紹，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！

本文題目：css使用偽元素清除浮動的方法介紹
本文路徑：http://muchs.cn/article20/iehijo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站改版、軟件開發(fā)

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

猜你還喜歡下面的內(nèi)容