什麼是BFC？
BFC（Block Formatting Contexts）塊級格式化上下文，它是頁面 CSS 視覺渲染的一部分， 用於決定塊級盒的佈局及浮動相互影響範圍的一個區域 。
BFC的創建
- 根元素（
<html>） - 浮動元素（
float不為none） - 絕對定位元素（
position為absolute或fixed） - 表格的標題和單元格（
display為table-caption，table-cell） - 匿名錶格單元格元素（
display為table或inline-table） - 行內塊元素（
display為inline-block） overflow的值不為visible的元素- 彈性元素（
display為flex或inline-flex的元素的直接子元素） - 網格元素（
display為grid或inline-grid的元素的直接子元素）
BFC的範圍
BFC 包含創建它的元素的所有子元素，但是不包括創建了新的 BFC 的子元素的內部元素。
簡單來説，子元素如果又創建了一個新的 BFC ，那麼它裏面的內容就不屬於上一個 BFC 了，這體現了 BFC 隔離 的思想。也就是所説， 一個元素不能同時存在於兩個 BFC 中 。
BFC的特性
BFC內部的塊級盒會在垂直方向上一個接一個排列 ①- 同一個
BFC下的相鄰塊級元素可能發生外邊距摺疊，創建新的BFC可以避免的外邊距摺疊 ② - 每個元素的外邊距盒（margin box）的左邊與包含塊邊框盒（border box）的左邊相接觸（從右向左的格式化，則相反），即使存在浮動也是如此 ③
- 浮動盒的區域不會和
BFC重疊 ④ - 計算
BFC的高度時，浮動元素也會參與計算 ⑤
BFC的應用
自適應多欄佈局
利用 特性③ 和 特性④ ，中間欄創建 BFC ，左右欄寬度固定後浮動。由於盒子的 margin box 的左邊和包含塊 border box 的左邊相接觸，同時浮動盒的區域不會和 BFC 重疊，所以中間欄的寬度會自適應， 示例 。
防止外邊距摺疊
利用 特性② ，創建新的 BFC ，讓相鄰的塊級盒位於不同 BFC 下可以防止外邊距摺疊， 示例 。
清除浮動
利用 特性⑤ ， BFC 內部的浮動元素也會參與高度計算，可以清除 BFC 內部的浮動， 示例 。
筆記最後
參考文章：url（https://www.colabug.com/2020/...）
這是我在思否上寫的第一篇筆記，以後會持續寫的，當然後面也會加上我學習中的所思所想。結尾引入一句很喜歡的話：保持獨立思考，不卑不亢，長成自己要的樣子。
