大白話講解什麼是BFC？

什麼是BFC？為什麼這個概念一直被提起？？為什麼每一個人都解釋不清BFC？？？

什麼是BFC？

BFC 全稱為塊格式化上下文 (Block Formatting Context) 。

從這個概念裡你能看出來什麼嗎？

這個名字給我們的資訊隻有 “塊” “格式化” “上下文” 。我們大概可以了解到這個東西是對上下文起作用的。

那裡的上下文？？HTML文檔！

它大概的作用，貌似是格式化上下文？？可能不是我們通常意義中的格式化。

我們沒有從這個名字中得到太多有用的資訊，僅僅知道它是一種功能，針對于 HTML文檔起作用。

那我們去看看官方是怎麼解釋的。

MDN：

一個塊格式化上下文（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 也是如此，隻有特性(功能)，沒有定義。

I know it when i see it.

BFC 特性(功能)

使 BFC 内部浮動元素不會到處亂跑；
和浮動元素産生邊界。