淺談bfc
- 2019 年 11 月 7 日
- 筆記
什麼是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 ，舉例子！！不要試圖去講定義！！
