什么是BFC？

在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。

Box: CSS布局的基本單位

Box 是 CSS 布局的對(duì)象和基本單位， 直觀點(diǎn)來(lái)說(shuō)，就是一個(gè)頁(yè)面是由很多個(gè) Box 組成的。元素的類(lèi)型和 display 屬性，決定了這個(gè) Box 的類(lèi)型。

不同類(lèi)型的 Box， 會(huì)參與不同的 Formatting Context（一個(gè)決定如何渲染文檔的容器），因此Box內(nèi)的元素會(huì)以不同的方式渲染。

讓我們看看有哪些盒子：

block-level box:display 屬性為 block, list-item, table 的元素，會(huì)生成 block-level box，并且參與 block fomatting context；

inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會(huì)生成 inline-level box，并且參與 inline formatting context；

run-in box: css3 中才有，想了解可以去查看。

Formatting context

Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見(jiàn)的 Formatting context 有 Block fomatting context (簡(jiǎn)稱(chēng)BFC)和 Inline formatting context (簡(jiǎn)稱(chēng)IFC)。

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

BFC 定義

BFC (Block formatting context)塊級(jí)格式化格式化上下文，它是一種獨(dú)立的渲染區(qū)域，只有Block-level-box參與，它規(guī)定了內(nèi)部的Block-level-box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

BFC布局規(guī)則：

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

Box的垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰的Box會(huì)重疊

BFC的區(qū)域不會(huì)與float box重疊（定位情況除外）

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

2、哪些元素會(huì)生成BFC:

根元素

float屬性不為none

position為absolute或fixed

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

overflow不為visible

3、BFC作用：

1、防止垂直 margin 重疊

2、避免浮動(dòng)元素和其他元素重疊

3、清除內(nèi)部浮動(dòng)