CSS中重要的BFC

CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。

創(chuàng)新互聯(lián)服務(wù)項目包括洪洞網(wǎng)站建設(shè)、洪洞網(wǎng)站制作、洪洞網(wǎng)頁制作以及洪洞網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，洪洞網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到洪洞省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為 定位流 、 浮動流 、 普通流 三種。而普通流其實就是指BFC中的FC。FC(Formatting Context)，直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。常見的FC有BFC、IFC，還有GFC和FFC。

BFC (Block Formatting Context)塊級格式化上下文，是用于布局塊級盒子的一塊渲染區(qū)域。[MDN上的解釋]：BFC是Web頁面 CSS 視覺渲染的一部分，用于決定塊盒子的布局及浮動相互影響范圍的一個區(qū)域。

注意：一個BFC的范圍包含創(chuàng)建該上下文元素的所有子元素，但 不包括 創(chuàng)建了新BFC的子元素的內(nèi)部元素。這從另一方角度說明，一個元素不能同時存在于兩個BFC中。因為如果一個元素能夠同時處于兩個BFC中，那么就意味著這個元素能與兩個BFC中的元素發(fā)生作用，就違反了BFC的隔離作用。

常規(guī)流(Normal flow)

浮動(Floats)

絕對定位(Absolute positioning)

注意： display:table也可以生成BFC的原因在于Table會默認生成一個匿名的table-cell，是這個匿名的table-cell生成了BFC。

瀏覽器對BFC區(qū)域的約束規(guī)則：

規(guī)則解讀：

BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素，反之亦然。我們可以利用BFC的這個特性來做很多事。

一個正常文檔流的block元素可能被一個float元素覆蓋，擠占正常文檔流，因此可以設(shè)置一個元素的float、display、position值等方式觸發(fā)BFC，以阻止被浮動盒子覆蓋。

[使用BFC阻止元素被浮動元素覆蓋]點擊預(yù)覽

通過改變包含浮動子元素的父盒子的屬性值，觸發(fā)BFC，以此來包含子元素的浮動盒子。

[使用BFC包含浮動元素]

注意，這里觸發(fā)BFC并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。

BFC內(nèi)部其他形式脫離文檔流(absolute fixed) 點擊預(yù)覽

有時候因為多列布局采用小數(shù)點位的width導(dǎo)致因為瀏覽器因為四舍五入造成的換行的情況，可以在最后一列觸發(fā)BFC的形式來阻止換行的發(fā)生。比如下面栗子的特殊情況

使用BFC阻止多列布局最后一列換行 點擊預(yù)覽

屬于同一個BFC的兩個相鄰塊級子元素的上下margin會發(fā)生重疊，(設(shè)置writing-mode:tb-rl時，水平margin會發(fā)生重疊)。所以當(dāng)兩個相鄰塊級子元素分屬于不同的BFC時可以阻止margin重疊。

這里給任一個相鄰塊級盒子的外面包一個div，通過改變此div的屬性使兩個原盒子分屬于兩個不同的BFC，以此來阻止margin重疊。

使用BFC阻止margin合并 點擊預(yù)覽

但是這里有個 疑問 點擊預(yù)覽 ：

如果外面包一層div，設(shè)置能觸發(fā)BFC的任何屬性都能阻止相鄰元素的margin合并。因為分屬不同BFC不會發(fā)生margin合并。

而如果在外面不包一個div的話，當(dāng)設(shè)置display為inline-block、inline-flex、table-captain，和position為absolute、fixed，float為left、right是可以阻止margin合并的。這里問題來了：

我們知道設(shè)置position和float會讓元素脫離文檔流并且又創(chuàng)建新的BFC，所以兩個元素就不是相鄰元素了，因此可以阻止相鄰元素margin合并，但是inline-block、inline-flex、inline-grid、table-captain為什么可以呢？如果有人知道為什么，請告知~

CSS中的BFC

個人理解

1、BFC是一個獨立的布局環(huán)境，BFC內(nèi)部的元素布局與外部互不影響；

2、可以通過一些條件觸發(fā)BFC，從而實現(xiàn)布局上的需求或解決一些問題；

3、可以將BFC想象成一個工具，無需探究其定義，只要著重理解其功能（特性）即可。

二、BFC有什么用？

BFC的觸發(fā)條件

1、根元素（html）

2、float值非none

3、overflow值非visible

4、display值為inline-block、table-cell、table-caption、flex、inline-flex

5、position值為absolute、fixed

BFC的特性

1、屬于同一個BFC的兩個相鄰容器的上下margin會重疊（重點）

2、計算BFC高度時浮動元素也參于計算（重點）

3、BFC的區(qū)域不會與浮動容器發(fā)生重疊（重點）

4、BFC內(nèi)的容器在垂直方向依次排列

5、元素的margin-left與其包含塊的border-left相接觸

6、BFC是獨立容器，容器內(nèi)部元素不會影響容器外部元素

BFC功能總結(jié)

1、可以利用BFC解決兩個相鄰元素的上下margin重疊問題；

2、可以利用BFC解決高度塌陷問題；

3、可以利用BFC實現(xiàn)多欄布局（兩欄、三欄、圣杯、雙飛翼等）。

CSS中的BFC及其作用

觸發(fā)紅色盒子的BFC，可防止被綠色盒子遮擋

把注釋的任意一條打開會觸發(fā).red的BFC，讓兩者處于不同的BFC

綠盒子設(shè)置浮動后，父盒子高度塌陷：

盒子觸發(fā)BFC可以解決這個問題

在同一個BFC中時：

分為兩個不同的BFC之后：

網(wǎng)站名稱：css樣式不觸發(fā)bfc,為什么css樣式不生效
當(dāng)前網(wǎng)址：http://chinadenli.net/article12/dsegggc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(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)