BFC 是塊級格式化上下文（Block Formatting Context）的縮寫，是 CSS 中一個重要的概念，用于控制塊級盒子的布局及浮動元素的交互。BFC 是一個獨立的渲染區域，內部的塊級盒子會按照特定的規則進行布局，不會影響到外部元素的布局。
BFC 的特點和作用包括：
浮動清除：在 BFC 中，浮動元素的父元素會包裹浮動元素，防止浮動元素溢出到父元素外部。
邊距折疊：在 BFC 中，垂直相鄰的塊級盒子的外邊距會發生折疊，不會傳遞到 BFC 外部。
防止文字環繞：在 BFC 中，塊級盒子不會圍繞浮動元素排列，而是會在浮動元素的下方顯示。
自適應高度：BFC 可以包含浮動元素，使得父元素的高度能夠自適應內部元素的高度。
觸發 BFC 的條件包括：
根元素（<html>）
浮動元素（float 不為 none）
絕對定位元素（position 為 absolute 或 fixed）
行內塊元素（display 為 inline-block）
表格單元格（display 為 table-cell）
表格標題（display 為 table-caption）
包含塊的 overflow 屬性不為 visible
通過創建 BFC，我們可以更好地控制頁面布局，解決一些常見的布局問題，如浮動清除、邊距折疊等。
