刷面試題的時候丙号，看到BFC 完全懵逼了先朦，第一次接觸這個概念。用了css 也有半年了犬缨，美化了那么多頁面喳魏，搜索了一下，原來我們已經用它解決過好多問題了怀薛，原來他也是有專業(yè)的名字的刺彩。
概念：塊級格式化上下文：block formatting context 的定義
（W3C CSS 2.1 規(guī)范中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用枝恋。）
一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型创倔。
不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。（來源菜鳥教程）
Box焚碌、Formatting Context的概念畦攘。
-
Box: CSS布局的基本單位
Box 是 CSS 布局的對象和基本單位， 直觀點來說十电，就是一個頁面是由很多個 Box 組成的知押。元素的類型和 display 屬性，決定了這個 Box 的類型鹃骂。 不同類型的 Box台盯， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染畏线。讓我們看看有哪些盒子：
- 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；
-
Formatting context
Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念栈虚。它是頁面中的一塊渲染區(qū)域袖外，并且有一套渲染規(guī)則，它決定了其子元素將如何定位魂务，以及和其他元素的關系和相互作用曼验。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
CSS2.1 中只有BFC和IFC, CSS3中還增加了GFC和FFC粘姜。
一鬓照、BFC的布局規(guī)則
- 內部的盒子會在垂直方向，一個一個地放置
- BFC是頁面上的一個隔離的獨立容器
- 屬于同一個BFC的兩個相鄰Box的上下margin會發(fā)生重疊
- 計算BFC的高度時孤紧，浮動元素也要參與計算
- 每個元素的左邊豺裆，與包含的盒子的左邊相接觸，即使存在浮動也是如此
- BFC的區(qū)域不會與float重疊
二号显、哪些元素會生成BFC
- 根元素或包含根元素的元素臭猜，即body根元素。
- 浮動元素押蚤，即float屬性值不為none（元素的position為absolute或fixed）蔑歌。
- 行內塊元素（元素的display為inline-block）。
- 表格單元格（元素的display為table-cell揽碘，HTML表格單元格默認為該值）次屠。
- 表格標題（元素的display為table-caption，HTML表格標題默認為該值）雳刺。
- 匿名表格單元格元素(或者元素的display為table劫灶、table-row、table-row-group掖桦、table-header-group本昏、table-footer-group（分別是HTML table、row枪汪、tbody涌穆、thead、tfoot的默認屬性）或inline-table)料饥。
- overflow的值不為visible的元素。
- display值為flow-root`的元素朱监。
- contain值為layout岸啡、content或strict`的元素。
- 彈性元素(display為flex或inline-flex元素的直接子元素)赫编。
- 網格元素(display為grid或inline-grid元素的直接子元素)巡蘸。
- 多列容器（元素的colunm-count或column-width不為auto奋隶，包括column-count為1）。
- column-span為all的元素始終會創(chuàng)建一個新的BFC悦荒，即使該元素沒有包裹在一個多列容器當中唯欣。
三、 BFC的作用和原理
- 自適應2欄布局
- 清除內部浮動
- 防止垂直 margin 重疊
