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

發(fā)布時(shí)間：2019-07-01 17:06:02 作者：佚名

塊級(jí)格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響。這篇文章給大家介紹了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元素也可以用來(lái)清除浮動(dòng)帶來(lái)的影響，因?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ì)帶來(lái)父元素的高度坍塌影響。

利用偽類(lèi)元素清除浮動(dòng)：

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

總結(jié)

以上所述是小編給大家介紹的CSS 使用偽元素清除浮動(dòng)的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！