*什么是BFC？
- BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。
- 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: css3 中才有， 這兒先不講了。
- 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] (http://www.cnblogs.com/lhb25/category/146075.html) **中還增加了GFC和FFC。
- 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ì)算
- 哪些元素會(huì)生成根元素
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
