現在有flex布局等新技術，bfc的效果比如包住元素，進行自適應布局等已經不需要了。現在只有免式的事後才需要知道bfc！
9.4.1 塊格式化上下文
浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不為'visible'的塊盒會為它們的內容建立乙個新的塊格式化上下文
在乙個塊格式化上下文中，盒在豎直方向乙個接乙個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由'margin'屬性決定。同乙個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合併
在乙個塊格式化上下文中，每個盒的left外邊（left outer edge）挨著包含塊的left邊（對於從右向左的格式化，right邊挨著）。即使存在浮動（儘管乙個盒的行盒可能會因為浮動收縮），這也成立。除非該盒建立了乙個新的塊格式化上下文（這種情況下，該盒自身可能會因為浮動變窄）
乙個塊格式化上下文（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全稱」block formatting context」, 中文為「塊級格式化上下文」。啪啦啪啦特性什麼的，一言難盡，大家可以自行去查詢，我這裡不詳述，免得亂了主次，總之，記住這麼一句話：bfc元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素。所以，避免margin穿透啊，清除浮動什麼的也好理解了。
不要試圖記憶他的定義。
應該舉例回答：
用 bfc可以包住浮動元素。(這不是清除浮動，.clearfix 才是清除浮動）
例如如果兒子浮動了，那麼爸爸包不住兒子，只有bfc才可以包住兒子。例如設定爸爸為float：left就包住了兒子。什麼才算乙個bfc？定義裡bfc寫的
浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不為'visible'的塊盒會為它們的內容建立乙個新的塊格式化上下文現在有點理解定義了
.baba
.erzi
display: flow-root; /* 觸發bfc */
/* display: float;*/ /*觸發bfc */
/* position: absolute; *//*觸發bfc */
/* display: inline-block; 觸發bfc */
/* overflow:auto; 觸發bfc */
/* display:table-cell;觸發bfc */
存在乙個問題：元素變成bfc之後，還會出發其他效果，比如position: absolute;會絕對定位。解決問題的方法就是使用display: flow-root;，它只有乙個效果，讓當前元素變成bfc。沒有***。
還有乙個作用，課可以歸功於爸爸管兒子，如果乙個div不是bfc，他其中的子元素的margin-top和margin-bottom會伸到父div外面。
例子：
爸爸和兒子一樣高，沒有受到外邊距影響。
變成bfc之後：
外邊距也算了進去。
這個問題buyongbfc也可以解決，margin無法穿透border，只需要加乙個border-top，margin就在.baba內部了。
可見沒有任何情況完全需要bfc。
總結一下bfc功能1：一旦乙個元素有上面那幾個屬性，那麼他就是乙個bfc，bfc會把內部的元素包起來，不管內部元素是否浮動。且內部元素的邊距也不會突破這個父bfc的範圍。
既：讓兩個相鄰的bfc界限分明。
舉個例子：
兩個div是是兄弟關係，把哥哥浮動了，那麼哥哥會疊在弟弟上面，會遮蓋弟弟。這時候如果把弟弟也變成bfc，那麼哥哥和弟弟之間就會界限分明，誰都不會遮擋誰。
例子如下：
內部元素完全包起來（float等），外部元素界限分明，不重疊。
面試官問的時候就說：
首先乙個bfc可以包住浮動元素，不讓他超過邊界（但這不是清除浮動，清除浮動用clearfix），即使是子元素的margin也可以包住，不衝出父元素。比如舉乙個**的例子，兒子是浮動元素，那麼只要在爸爸上寫overflow：hidden;或者overflow:auto;或者diaplay：flow-root;那麼爸爸就會包住兒子，且margin也會在爸爸裡面）
乙個浮動元素會和另乙個不是浮動的元素重疊，浮動元素會浮在兩乙個元素上面，如果把另乙個元素寫成bfc，那麼這兩個元素就不會互相重疊。
注釋：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。值為大的邊距。既：兩個塊級元素一般情況下上下邊距會合併，行內元素，浮動元素，絕對定位之後不會合併。
BFC到底是什麼？
經常聽到說 觸發bfc 的說法，那bfc到底是什麼呢?bfc全稱block format context塊級格式化上下文，給盒子新增bfc屬性，會使瀏覽器給特定的盒子按另一種語法渲染。能夠觸發bfc的屬性有 1 position absolute fixed 2 overflow hidden 最常...
什麼是BFC規則？
block formatting context 塊級格式化上下文 塊級元素的渲染區域規則 bfc盒子 外部不影響內部 內部不影響外部 1.float不為none 2.position屬性為absolute和fixed 3.oveflow不為visiable 4.html 根標籤1.bfc盒子內部的...
前端什麼是BFC
什麼是bfc？全稱塊級格式化上下文？什麼意思不懂。看了好多部落格，基本都是抄的，真心都不是大白話。我今天來總結一下，用菜鳥級別的語言來描述。bfc 應該可以抽象成乙個 獨立的個體，出淤泥而不染的白蓮花。是的不受其他元素的影響，始終保持自己獨立。就是正常的普通流布局規則，設定的樣式是什麼樣的，就按正常...