在了解什么是BFC之前，首先得明白什么是Box , Formatting Context （一個決定如何渲染文檔的容器）的概念

?

Box: CSS布局的基本單位

Box是 CSS 布局的對象和基本單位， 直觀點來說， 就是一個頁面是由很多個 Box組成的， 元素的類型和display屬性， 決定這個BOX的類型， 不同類型的BOX， 會參與不同的Formatting Context， 因此BOX內(nèi)的元素會以不同的方式渲染， 其盒子的類型分別為：

• block-level box:display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block fomatting context；
• inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context，若為block-level box 設(shè)置inline-block則會產(chǎn)生BFC
• run-in box: css3 中才有， 這兒先不講了

Formatting Context ：是W3C CSS2.1規(guī)范中的一個概念，它是頁面中的一塊渲染區(qū)域， 并且有一套渲染規(guī)則，他覺得了子元素如何定位， 以及和其他元素關(guān)系和相互作用

最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

　　CSS2.1 中只有?BFC?和?IFC,?CSS3?中還增加了?GFC?和?FFC。

BFC 定義： BFC（Block formatting context）直譯為“塊級格式上下文”， 它是一個獨立渲染區(qū)域，只有BLOCK-LEVEL BOX參與， 他規(guī)定內(nèi)部的BLOCK-LEVEL BOX如何布局， 并與這個區(qū)域外部不相干

　BFC布局規(guī)則：

內(nèi)部的Box會在垂直方向，一個接一個地放置。

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊

每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

BFC的區(qū)域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算

哪些元素會參生BFC

根元素

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

BFC的作用及原理

自適應(yīng)兩欄布局，根據(jù)BFC布局規(guī)則第3條：每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。根據(jù)BFC布局規(guī)則第四條：BFC的區(qū)域不會與float box重疊。我們可以通過通過觸發(fā)main生成BFC， 來實現(xiàn)自適應(yīng)兩欄布局.main { ??overflow: hidden; }? BFC后，這個新的BFC不會與浮動的aside重疊。因此會根據(jù)包含塊的寬度，和aside的寬度，自動變窄。

轉(zhuǎn)載于:https://www.cnblogs.com/longsf/p/10438078.html

總結(jié)

以上是生活随笔為你收集整理的BFC的概念及作用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。