bfc即block formatting context(塊級格式化上下文)，是 web 頁面的視覺化 css 渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。
個人理解：在某些條件（形成bfc的條件）下，乙個元素及其子元素擁有特定的渲染規則，此時我們稱該元素形成乙個bfc。
屬於同乙個 bfc 內部的 box 的垂直 margin 會發生重疊
bfc 是個獨立的容器，容器裡面的子元素不會影響外面的元素，反之亦然
計算bfc的高度時，浮動元素也參與計算
阻止外邊距重疊
html
box
.child
css
.child:last-childhtml
box
.child
.child:first-child
css
.child:last-childhtml
box
.child
css
boxhtml
box
.child
.child:first-child
.child:;ast-child
其實我們在平常的工作中經常和 bfc 打交道，如外邊距摺疊，設定overflow:hidden清除浮動，自適應兩列布局。但是很多人包括我自己對於 bfc 只是聽說過概念，並不清楚其形成條件和渲染規則。今天通過寫部落格的方式讓自己對其有了更清晰的認識，希望大家看完這篇文章後對 bfc 也可以有個清晰的了解和認識。其中若有錯誤的地方也希望可以幫忙指出。
參考歡迎到前端學習打卡群一起學習～516913974
前端BFC布局學習
bfc，全稱為 block formatting context 按照我的理解是我們在某一條件下會觸發bfc布局，會產生一定的效果。block formatting contexts翻譯為 塊級元素格式化上下文。它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關係和相互作用。其中塊級元素可以...
CSS實戰筆記 九 BFC
bfc block formatting context 的中文名稱是塊級格式化上下文，它是乙個獨立渲染的區域 在這個區域的內部有自己的布局規則，內部的元素對外部的元素沒有任何影響，反之亦然 bfc 的內部元素都必須是塊級盒子，並且這些盒子有一定的布局規則，具體如下 建立乙個 bfc 的方法有很多，...
清除浮動 BFC
問題 父盒子高度為0，子盒子不佔位置，子盒子不會撐開父盒子。下面的標準流盒子，會跑到父盒子中的子盒子下面。處理辦法 清除浮動。清除子盒子因為浮動，對父子造成的影響 使用方法 哪兒出問題就在哪兒給 裡面的類名標籤後加乙個clearfix類名。1.clear both 2.overflow hidden...