BFC 的簡單理解

Faremax 發布于2019-08-29 13:14 / 2641人閱讀

BFC 的擴寫是 Block formatting contexts （塊級格式化上下文），它看不見摸不著但對 CSS 盒模型有影響。
標準里對 BFC 的描述是：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

同時提到一個前端常見的 collapse 現象：

Vertical margins between adjacent block-level boxes in a block formatting context collapse.

所以筆者是這么理解 BFC 的：

浮動元素、絕對定位元素、非塊盒的塊容器（inline-block、table-cell、table-caption 元素）、overflow 不為 visible 的元素會創建 BFC

同一個 BFC 里，兩個相鄰的塊級盒的垂直外邊距會 collapse（塌陷）

也就是說不同的 BFC之間就會消除相鄰元素的 collapse，以下是可創建 BFC 的條件：

div: float:left | right

div: display:inline-block | table-cells | table-captions

div: position:absolute

這里寫了個測試 collapse 的 demo，經測試發現：

“同一個 BFC 里，兩個相鄰的塊級盒”可以指相鄰元素如 div-2 和 div-3，也可以指父元素和子元素如 div-1 和 div-2 或 3

設置 overflow 時，只能讓 div-1 與它的子元素 div-2 或 3 消除 collapse，而不能讓 div-1 與相鄰元素 div-4 消除 collapse

參考：BFC 的文檔
原文：BFC 的簡單理解

云服務器 GPU云服務器簡單理解超融合架構 bfc bfc布局云計算的理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112464.html

淺析BFC

摘要：原文鏈接說起其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理原文鏈接: Fyerls Blog 說起 BFC 其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是 BFC。之所以會想了解下什么...

voyagelab 2019-08-29 15:06 評論0 收藏0
淺析BFC

摘要：原文鏈接說起其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理原文鏈接: Fyerls Blog 說起 BFC 其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是 BFC。之所以會想了解下什么...

My_Oh_My 2019-08-02 10:14 評論0 收藏0
關于CSS中設置overflow屬性的值為hidden的相關理解

摘要：非根元素，且其屬性是和的元素的包含塊它的包含塊是由最近的祖先塊容器盒的內容區域創建的。如何觸發只需要保證滿足下面至少一條就會觸發根元素設置了值不為的元素設置了屬性不為的元素設置了屬性不為和的元素設置了的值為和中的任何一個的元素。作者：心葉時間：2018-04-18 17:53 包裹元素剪裁條件是不是包裹元素overflow設置為hidden以后，內部元素如果超過包裹元素的話就會被剪...

codercao 2019-08-29 15:06 評論0 收藏0
理解 CSS 布局和 BFC

摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來解決這個布局問題。是布局中的一個迷你布局你可以將看作是頁面內的一個迷你布局。理解瀏覽器如何布置網頁是非常基礎的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關于塊格式化上下文(BFC)的。你可能從未聽說過這個術語，但是如果你曾經用CSS做過布局，你可能知道它是什么...

miya 2019-08-30 15:43 評論0 收藏0
對BFC規范的理解

摘要：垂直方向的距離由決定。屬于同一個的兩個相鄰的會發生疊加，與方向無關。計算的高度時，浮動子元素也參與計算。形成后出現的常見問題重疊問題浮動相關問題可以解決的問題疊加的問題，要阻止重疊，只要將倆個元素別放在一個中即可。 1. 什么是BFC BFC（block formatting context）：塊級格式化上下文。簡單來說它就是一種會影響元素與元素之間的位置、間距的屬性。 2. 如何觸...

pingan8787 2019-08-30 15:56 評論0 收藏0