什么是BFC? CSS 使用偽元素清除浮動(dòng)的方法

BFC概念:
塊級(jí)格式化上下文,是一個(gè)獨(dú)立的渲染區(qū)域,讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離,使內(nèi)外元素的定位不會(huì)相互影響。
我們先了解一個(gè)名詞:BFC(block formatting context),中文為“塊級(jí)格式化上下文”。
先記住一個(gè)原則: 如果一個(gè)元素具有BFC,那么內(nèi)部元素再怎么翻江倒海,翻云覆雨,都不會(huì)影響外面的元素。所以,BFC元素是不可能發(fā)生margin重疊的,因?yàn)閙argin重疊會(huì)影響外面的元素的;BFC元素也可以用來清除浮動(dòng)帶來的影響,因?yàn)槿绻磺宄?,子元素浮?dòng)則會(huì)造成父元素高度塌陷,必然會(huì)影響后面元素的布局和定位,這顯然有違BFC元素的子元素不會(huì)影響外部元素的設(shè)定。
以下情況會(huì)觸發(fā)BFC:
•<html>根元素
•float的值不為none
•overflow的值為auto,scroll,hidden
•display的值為table-cell,table-caption和inline--block中的任何一個(gè)
•position的值不為relative和static 即 position: absolute/fixed
顯然我們?cè)谠O(shè)置overflow值為hidden時(shí)使container元素具有BFC,那么子元素child浮動(dòng)便不會(huì)帶來父元素的高度坍塌影響。
利用偽類元素清除浮動(dòng):
.clearFix::after,.clearFix::before { display: block; content: ''; clear: both; visibility: hidden; height: 0; } .clearFix { zoom: 1;}
總結(jié)
以上所述是小編給大家介紹的CSS 使用偽元素清除浮動(dòng)的方法,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
- 這篇文章主要介紹了CSS 列表模型之marker標(biāo)記的使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-07-23
- 這篇文章主要介紹了淺談CSS 偽元素&偽類的妙用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-09-01
- 本篇重點(diǎn)介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場(chǎng)景,如填充文本、作為iconfont、進(jìn)度線、時(shí)間線以及幾何圖形,感興趣的朋友一起看看吧2018-02-07
- before 和 after其實(shí)就是附著在元素前后的偽元素,說他是偽元素的意思就是,元素不是在DOM中生成的,而是在瀏覽器渲染引擎渲染CSS的時(shí)候畫上去的,這篇文章主要給大家介紹2017-09-18
- 本文介紹了什么是 ::marker 以及它的一些實(shí)用場(chǎng)景,可以看出雖然 ::before 、::after 也能實(shí)現(xiàn)類似的功能,但 CSS 還是提供了更具有語義化的標(biāo)簽 ::marker,也表明了大家需2021-06-25