關於BFC的一些觸發問題？

如上圖所示，為什麼若至少有一個子節點是display為block級別，就一定要生成BFC呢？

如果圖上說的是對的嗎？如果是，那又是因為什麼原因，導致它觸發生成BFC？

---

圖裡的這個說法是錯的。

假設我們只應用了瀏覽器的默認樣式，那麼下方這個 div 沒有建立新的 BFC。

毫無疑問這個 div 是一個 block-level element，於是它在渲染時會生成一個 block-level box。同時因為這個 box 非 table box，也不是置換元素，所以按規範定義它又是一個 block container box。

按定義，block container box 中，要麼只包含 inline-level box 於是建立起新的 IFC，要麼就只包含 block-level box（會在 inline-level box 外部生成匿名的 block-level box）。這裡沒有說這樣的元素會建立新的 BFC。內部的元素仍應視為在上一級的 BFC 內。

規範定義見 9.2.1 Block-level elements and block boxes。

建立新的 BFC 的元素（可稱為 BFC root）有「不能與內部 float 交疊」的特性，於是計算高度時會自動撐起高度起到「清除浮動」的效果。這個你一試便知。

見 10.6.7 "Auto" heights for block formatting context roots。

---

瀉藥

是不是最近這倆字兒打多了導致老跑肚啊……

實話說，偶沒看懂你要問啥，圖上說啥也沒看懂。

貌似圖上寫這個的人也不太懂吧……

BFC 是建立新的，新的後其內元素按照 BFC 的規矩布局。

比如根元素 HTML 的 默認 overflow 是 auto

它就建立了 BFC，他的內容按照 BFC 的規矩來布局。

僅從圖裡的 HTML 來看

看不出有新建 BFC 的東西

如果補充外圍元素

也僅僅是在 HTML 創建的 BFC 對其元素進行布局。

在沒有新 style 補充的情況下，

只能說圖裡說的什麼 display block 就生成 BFC 這話不真。

---

樓主那張圖我看過，說的不是BFC的生成，它是用來解釋塊容器可以容納塊級盒或者行內盒的。（A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.）

注意這裡的或者二字，這兩種類型的盒不能同時存在於塊容器內,而且如果要容納inline-level box的話必須創建IFC。

並且如果一個塊容器內部有一個塊級盒，那麼我們強制它的內部必須只能有塊級盒（if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.）

所以：

圖1，因為div內都是inline元素，所以div生成IFC用來容納行內盒；

圖2，p是塊級元素，所以div內的元素都是塊級盒子，也就是 @顧軼靈說的那樣，inline-level box （也就是a標籤和span標籤）外部生成匿名的 block-level box，他們的BFC仍然是div

---

推薦閱讀：