BFC 定義
BFC(Block formatting context)直譯為“塊級(jí)格式化上下文”。它是一個(gè)獨(dú)立的渲染區(qū)域，只有 Block-level box 參與暮顺，它規(guī)定了內(nèi)部的
Block-level box 如何布局望浩，并且與這個(gè)區(qū)域外部毫不相干。
首先了解一下Box Formatting Context的相關(guān)概念擅笔。
Formatting Context
Formatting Context是W3C CSS2.1 規(guī)范中的一個(gè)概念，它是頁(yè)面中的一塊渲染區(qū)域屯援，并且有一套渲染規(guī)則猛们，它決定了其子元素如何定位，以及和其他元素的關(guān)系和相互作用狞洋。最常見(jiàn)的Formatting context 有Block formatting context（簡(jiǎn)稱BFC）和 Inline formatting context（簡(jiǎn)稱IFC）弯淘。
Box：css布局的基本單位
Box 是 css 布局的對(duì)象和基本單位，一個(gè)頁(yè)面是由很多個(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 formatting context.
- inline-level box：display 屬性為 inline, inline-block, inline-table 的元素浆竭，會(huì)生成 inline-level box。并且參與 inline formatting context.
- run-in box: css3中才有。
BFC
BFC是一個(gè)獨(dú)立的布局環(huán)境兆蕉，其中的元素布局時(shí)不受外界的應(yīng)i昂羽戒，并且在一個(gè)BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列虎韵。
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就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器份乒，容器里的子元素不會(huì)影響到外面的元素，反之也如此腕唧。
- 計(jì)算BFC的高度時(shí)或辖，浮動(dòng)元素也參與計(jì)算。
如何創(chuàng)建（觸發(fā)）BFC
- html根元素本身就是一個(gè)BFC元素（body元素不是）
- 浮動(dòng)元素：float 除了 none 以外的值
- 絕對(duì)定位元素： position: absolute / fixed
- display: inline-block / table-cells / flex
- overflow: 除了 visible 以外的值 （hidden / auto / scroll）
BFC 作用
1. 利用BFC避免margin重疊
eg：
根據(jù)第二條枣接，屬于同一個(gè)BFC的兩個(gè)相鄰Box會(huì)發(fā)生margin重疊颂暇，所以我們可以設(shè)置兩個(gè)不同的BFC。：把第一個(gè) p 用 div 包裹但惶，然后激活它成為一個(gè) BFC耳鸯。
2. 自適應(yīng)兩欄布局
根據(jù) 每個(gè)盒子的margin box 的左邊，與包含塊border box 的左邊想接觸膀曾，即使存在浮動(dòng)也是如此县爬。
eg：
利用 BFC的區(qū)域不會(huì)與float box 重疊，我們可以rangright成為單獨(dú)的BFC添谊。
right會(huì)自動(dòng)的適應(yīng)寬度捌省，這時(shí)候就形成了一個(gè)兩欄自適應(yīng)的布局。
3. 清除浮動(dòng)
當(dāng)我們不給父節(jié)點(diǎn)設(shè)置高度碉钠，子節(jié)點(diǎn)設(shè)置了浮動(dòng)的時(shí)候，父節(jié)點(diǎn)會(huì)發(fā)生高度塌陷卷拘，這是要用清除浮動(dòng)喊废。
eg：
這時(shí)候可以根據(jù) 計(jì)算BFC的高度是，浮動(dòng)元素也參與計(jì)算栗弟，給父節(jié)點(diǎn)激活BFC污筷。
參考：《BFC詳解》
