淺談bfc

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

1.什麼是BFC

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

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

這個名字給咱們的信息只有 「塊」 「格式化」 「上下文」 。咱們大概能夠了解到這個東西是對上下文起做用的。
那裏的上下文？？ HTML文檔！
它大概的做用，貌似是格式化上下文？？可能不是咱們一般意義中的格式化。

咱們沒有從這個名字中獲得太多有用的信息，僅僅知道它是一種功能，針對於 HTML文檔 起做用。

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

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

2.BFC特性（功能）

1 使 BFC 內部浮動元素不會處處亂跑；
2 和浮動元素產生邊界。

使 BFC 內部的浮動元素不會處處亂跑

 

 

 

 

 

 

在正常的文檔流中，塊級元素是按照從上自下，內聯元素從左到右的順序排列的。

若是我給裏面的元素一個 float 或者絕對定位，它就會脫離普通文檔流中。

 

 

此時若是咱們還想讓外層元素包裹住內層元素該若是去作？？

讓外層元素產生一個 BFC 。（第一點裏有說明產生BFC的方法哦~）

 

 這就是 BFC 的第一個做用：使 BFC 內部的浮動元素不會處處亂跑。

和浮動元素產生邊界

html:

css:

 

沒有產生bfc效果

 

 

 

通常狀況下若是沒有 BFC的話，咱們想要讓普通元素與浮動元素產生左右邊距，須要將 maring 設置爲浮動元素的寬度加上你想要產生邊距的寬度。

這裏的浮動元素的寬度爲 200px ，若是想和它產生 20px 的右邊距，須要將非浮動元素的 margin-left 設置爲 200px+20px 。

產生bfc：

 

 

總結

不要試圖去講解 BFC 的定義！！

如何說明 BFC ，舉例子！！不要試圖去講定義！！