CSS8:到底什麼是BFC？

如今有flex佈局等新技術，bfc的效果好比包住元素，進行自適應佈局等已經不須要了。如今只有免式的過後才須要知道BFC！

看不懂的定義

CSS規範中對 BFC 的描述

9.4.1 塊格式化上下文

浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不爲'visible'的塊盒會爲它們的內容創建一個新的塊格式化上下文

在一個塊格式化上下文中，盒在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由'margin'屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合並

在一個塊格式化上下文中，每一個盒的left外邊（left outer edge）挨着包含塊的left邊（對於從右向左的格式化，right邊挨着）。即便存在浮動（儘管一個盒的行盒可能會由於浮動收縮），這也成立。除非該盒創建了一個新的塊格式化上下文（這種狀況下，該盒自身可能會由於浮動變窄）

MDN 對 BFC 的描述

一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染出的一部分。它是塊級盒佈局出現的區域，也是浮動層元素進行交互的區域。

一個塊格式化上下文由如下之一建立：

根元素或其它包含它的元素
浮動元素 (元素的 float 不是 none)
絕對定位元素 (元素具備 position 爲 absolute 或 fixed)
內聯塊 (元素具備 display: inline-block)
表格單元格 (元素具備 display: table-cell，HTML表格單元格默認屬性)
表格標題 (元素具備 display: table-caption, HTML表格標題默認屬性)
具備overflow 且值不是 visible 的塊元素，
display: flow-root
column-span: all 應當老是會建立一個新的格式化上下文，即使具備 column-span: all 的元素並不被包裹在一個多列容器中。
一個塊格式化上下文包括建立它的元素內部全部內容，除了被包含於建立新的塊級格式化上下文的後代元素內的元素。

塊格式化上下文對於定位 (參見 float) 與清除浮動 (參見 clear) 很重要。定位和清除浮動的樣式規則只適用於處於同一塊格式化上下文內的元素。浮動不會影響其它塊格式化上下文中元素的佈局，而且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。

張鑫旭對 BFC 的描述

http://www.zhangxinxu.com/wor...

BFC全稱」Block Formatting Context」, 中文爲「塊級格式化上下文」。啪啦啪啦特性什麼的，一言難盡，你們能夠自行去查找，我這裏不詳述，省得亂了主次，總之，記住這麼一句話：BFC元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素。因此，避免margin穿透啊，清除浮動什麼的也好理解了。

看不懂定義！記不住定義！舉例回答BFC

不要試圖記憶他的定義。
應該舉例回答：

功能1：爸爸管兒子

用 BFC 能夠包住浮動元素。(這不是清除浮動，.clearfix 纔是清除浮動）

例如若是兒子浮動了，那麼爸爸包不住兒子，只有BFC才能夠包住兒子。例如設置爸爸爲float：left就包住了兒子。什麼纔算一個bfc？定義裏bfc寫的

浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不爲'visible'的塊盒會爲它們的內容創建一個新的塊格式化上下文

如今有點理解定義了

.baba{
  border: 10px solid red;
  min-height: 10px;
 display: flow-root; /* 只觸發BFC  */
  /* display: float;*/ /*觸發BFC */
  /* position: absolute; *//*觸發BFC */
/*  display: inline-block; 觸發BFC */
  /*  overflow:auto; 觸發BFC */
/*  display:table-cell;觸發BFC */
}
.erzi{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

display: flow-root; /* 觸發BFC  */
  /* display: float;*/ /*觸發BFC */
  /* position: absolute; *//*觸發BFC */
  /*  display: inline-block; 觸發BFC */
  /*  overflow:auto; 觸發BFC */
  /*  display:table-cell;觸發BFC */

上面幾個屬性都會觸發BFC

存在一個問題：元素變成BFC以後，還會出發其餘效果，好比position: absolute;會絕對定位。解決問題的方法就是使用display: flow-root;，它只有一個效果，讓當前元素變成BFC。沒有反作用。
http://js.jirengu.com/winozoc...

還有一個做用，課能夠歸功於爸爸管兒子，若是一個div不是bfc，他其中的子元素的margin-top和margin-bottom會伸到父div外面。
例子：

爸爸和兒子同樣高，沒有受到外邊距影響。

變成BFC以後：

外邊距也算了進去。

這個問題buyongbfc也能夠解決，margin沒法穿透border，只須要加一個border-top，margin就在.baba內部了。
可見沒有任何狀況徹底須要BFC。

總結一下BFC功能1：一旦一個元素有上面那幾個屬性，那麼他就是一個BFC，BFC會把內部的元素包起來，無論內部元素是否浮動。且內部元素的邊距也不會突破這個父BFC的範圍。

功能2：兄弟之間劃清界限

既：讓兩個相鄰的BFC界限分明。
舉個例子：
兩個div是是兄弟關係，把哥哥浮動了，那麼哥哥會疊在弟弟上面，會遮蓋弟弟。這時候若是把弟弟也變成BFC，那麼哥哥和弟弟之間就會界限分明，誰都不會遮擋誰。
例子以下：

http://js.jirengu.com/woduniq...

總結BFC功能

內部元素徹底包起來（float等），外部元素界限分明，不重疊。

面試官問的時候就說：

1. 首先一個BFC能夠包住浮動元素，不讓他超過邊界（但這不是清除浮動，清除浮動用clearfix），即便是子元素的margin也能夠包住，不衝出父元素。好比舉一個代碼的例子，兒子是浮動元素，那麼只要在爸爸上寫overflow：hidden;或者overflow:auto;或者diaplay：flow-root;那麼爸爸就會包住兒子，且margin也會在爸爸裏面）
2. 一個浮動元素會和另外一個不是浮動的元素重疊，浮動元素會浮在兩一個元素上面，若是把另外一個元素寫成bfc，那麼這兩個元素就不會互相重疊。

記錄一下上下margin合併問題

註釋：只有 普通文檔流中 塊框 的垂直外邊距纔會發生外邊距合併。 行內框 、浮動框或 絕對定位之間的外邊距 不會合並。值爲大的邊距。

既：兩個塊級元素通常狀況下上下邊距會合並，行內元素，浮動元素，絕對定位以後不會合並。
http://js.jirengu.com/rihoxab...