BFC，即“塊級格式化上下文”（Block Formatting Context），是 CSS 中一個重要的概念，它指的是一個獨立的渲染區域，讓塊級盒子在佈局時遵循一些特定的規則。BFC 的存在使得我們可以更好地控制文檔流，處理浮動、清除浮動等問題。
BFC 的形成條件包括：
- 根元素或包含它的元素
- 浮動元素（元素的 float 不是 none）
- 絕對定位元素（元素的 position 爲 absolute 或 fixed）
- 行內塊元素（元素的 display 爲 inline-block）
- 表格單元格（元素的 display 爲 table-cell）
- 表格標題（元素的 display 爲 table-caption）
- overflow 值不爲 visible 的塊元素
BFC 的特性包括：
- 內部的 Box 會在垂直方向上一個接一個地放置。
- Box 垂直方向的距離由 margin 決定，屬於同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊。
- 每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此。
- BFC 的區域不會與浮動元素重疊。
- BFC 在頁面上是一個獨立的容器，外面的元素不會影響裏面的元素，反之亦然。
- 計算 BFC 的高度時，浮動元素也參與計算。
BFC 的應用場景包括：
1、清除浮動：
當一個容器內部有浮動元素時，如果沒有給容器創建 BFC，那麼容器的高度將無法被撐開，導致一些問題，如邊框或背景不顯示、文字環繞等。可以通過在容器上創建 BFC 來解決這個問題，例如可以將容器的 overflow 設置爲 hidden。
2、避免 margin 重疊：
當兩個相鄰的盒子都設置了 margin 時，它們之間的距離將會是兩者 margin 中較大的一個，而不是將兩者相加。如果將其中一個盒子放入一個 BFC 中，可以避免 margin 重疊的問題。
3、實現多欄佈局：
通過創建 BFC，可以將容器劃分爲獨立的區域，在這些區域內佈局，從而實現多欄佈局。
4、防止浮動元素遮蓋：
當一個元素內部有浮動元素時，如果該元素沒有創建 BFC，那麼它的高度會縮爲0，從而導致元素下面的內容被浮動元素遮蓋。可以通過在元素上創建 BFC 來防止這種情況的發生。
總之，理解 BFC 的概念及其應用場景，對於編寫複雜的佈局代碼非常有幫助。通過創建 BFC，我們可以解決許多常見的佈局問題，例如清除浮動、避免 margin 重疊、實現多欄佈局等。
更多詳細的CSS知識體系，可以通過這裏瞭解學習
爲幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，雲服務器部署上線，從入門到精通
- PC端項目開發（1個）
- 移動WebApp開發（2個）
- 多端響應式開發（1個）
共4大完整的項目開發 ！一行一行代碼帶領實踐開發，實際企業開發怎麼做我們就是怎麼做。從學習一開始就進入工作狀態，省得浪費時間。
從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規範，命名規範，項目代碼規範，SEO優化規範
從藍湖UI設計稿 到 PC端，移動端，多端響應式開發項目開發
- 真機調試，雲服務部署上線；
- Linux環境下 的 Nginx 部署，Nginx 性能優化；
- Gzip 壓縮，HTTPS 加密協議，域名服務器備案，解析；
- 企業項目域名跳轉的終極解決方案，多網站、多系統部署；
- 使用 使用 Git 在線項目部署；
這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只爲實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路 ！
過程中【不涉及】任何費用和利益，非誠勿擾 。
詳細進入瞭解