BFC 已經(jīng)是一個(gè)耳聽熟聞的詞語了碴裙，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動(dòng)莺琳，防止 margin 重疊等）,那么今天就來詳細(xì)學(xué)習(xí)下什么是BFC以及他的應(yīng)用载慈。

1.BFC是什么

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

BOX:CSS布局的基本單位

Box 是 CSS 布局的對(duì)象和基本單位料扰， 直觀點(diǎn)來說，就是一個(gè)頁面是由很多個(gè) Box 組成的晒杈。元素的類型和 display 屬性孔厉，決定了這個(gè) Box 的類型。 不同類型的 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: run-in框的行為如下：

如果run-in框包含一個(gè)塊框殊橙，那么run-in框變?yōu)閴K框。

如果run-in框的后繼兄弟元素為塊框（非浮動(dòng)蛀柴，非絕對(duì)定位），那么run-in框變?yōu)樵搲K框的第一個(gè)行內(nèi)框吊洼。run-in不能插入本身為run-in的塊中制肮，也不能插入塊中已有run-in的塊中。

否則综液，run-in框變?yōu)閴K框儒飒。

Formatting context

Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁面中的一塊渲染區(qū)域附帽，并且有一套渲染規(guī)則井誉，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用喳钟。最常見的 Formatting context 有 Block fomatting context (簡(jiǎn)稱BFC)和 Inline formatting context (簡(jiǎn)稱IFC)。? ? ? ? CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC奔则。

IFC

IFC(Inline Formatting Contexts)直譯為"內(nèi)聯(lián)格式化上下文"应狱，IFC的line box（線框）高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來（不受到豎直方向的padding/margin影響)? ? ? ? IFC中的line box一般左右都貼緊整個(gè)IFC，但是會(huì)因?yàn)閒loat元素而擾亂疾呻。float元素會(huì)位于IFC與與line box之間，使得line box寬度縮短尉咕。 同個(gè)ifc下的多個(gè)line box高度會(huì)不同璃岳。 IFC中時(shí)不可能有塊級(jí)元素的，當(dāng)插入塊級(jí)元素時(shí)（如p中插入div）會(huì)產(chǎn)生兩個(gè)匿名塊與div分隔開单芜，即產(chǎn)生兩個(gè)IFC犁柜，每個(gè)IFC對(duì)外表現(xiàn)為塊級(jí)元素，與div垂直排列扒腕。? ? ? ? 那么IFC一般有什么用呢萤悴？? ? ? ? 水平居中：當(dāng)一個(gè)塊要在環(huán)境中水平居中時(shí)，設(shè)置其為inline-block則會(huì)在外層產(chǎn)生IFC蹋盆，通過text-align則可以使其水平居中硝全。? ? ? ? 垂直居中：創(chuàng)建一個(gè)IFC，用其中一個(gè)元素?fù)伍_父元素的高度，然后設(shè)置其vertical-align:middle拌倍，其他行內(nèi)元素則可以在此父元素下垂直居中噪径。

GFC

GFC(GridLayout Formatting Contexts)直譯為"網(wǎng)格布局格式化上下文"数初，當(dāng)為一個(gè)元素設(shè)置display值為grid的時(shí)候泡孩，此元素將會(huì)獲得一個(gè)獨(dú)立的渲染區(qū)域，我們可以通過在網(wǎng)格容器（grid container）上定義網(wǎng)格定義行（grid definition rows）和網(wǎng)格定義列（grid definition columns）屬性各在網(wǎng)格項(xiàng)目（grid item）上定義網(wǎng)格行（grid row）和網(wǎng)格列（grid columns）為每一個(gè)網(wǎng)格項(xiàng)目（grid item）定義位置和空間仑鸥。? ? ? ? 那么GFC有什么用呢眼俊，和table又有什么區(qū)別呢？首先同樣是一個(gè)二維的表格疮胖，但GridLayout會(huì)有更加豐富的屬性來控制行列澎灸，控制對(duì)齊以及更為精細(xì)的渲染語義和控制。

FFC

FFC(Flex Formatting Contexts)直譯為"自適應(yīng)格式化上下文"性昭，display值為flex或者inline-flex的元素將會(huì)生成自適應(yīng)容器（flex container）巩梢，可惜這個(gè)牛逼的屬性只有谷歌和火狐支持，不過在移動(dòng)端也足夠了括蝠，至少safari和chrome還是OK的，畢竟這倆在移動(dòng)端才是王道搁拙。? ? ? ? Flex Box 由伸縮容器和伸縮項(xiàng)目組成法绵。通過設(shè)置元素的 display 屬性為 flex 或 inline-flex 可以得到一個(gè)伸縮容器。設(shè)置為 flex 的容器被渲染為一個(gè)塊級(jí)元素盐茎，而設(shè)置為 inline-flex 的容器則渲染為一個(gè)行內(nèi)元素徙赢。? ? ? ? 伸縮容器中的每一個(gè)子元素都是一個(gè)伸縮項(xiàng)目探越。伸縮項(xiàng)目可以是任意數(shù)量的窑业。伸縮容器外和伸縮項(xiàng)目?jī)?nèi)的一切元素都不受影響常柄。簡(jiǎn)單地說，F(xiàn)lexbox 定義了伸縮容器內(nèi)伸縮項(xiàng)目該如何布局西潘。

BFC定義

BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"秸架。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與东抹， 它規(guī)定了內(nèi)部的Block-level

Box如何布局缭黔，并且與這個(gè)區(qū)域外部毫不相干。

2.BFC布局規(guī)則：

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

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

每個(gè)元素的margin box的左邊喊儡， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)买喧。即使存在浮動(dòng)也是如此匆赃。

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

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

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

3.哪些元素會(huì)生成BFC

根元素

float屬性不為none

position為absolute或fixed

display為inline-blcok绎橘、table-cell、table-caption

overflow不為visible