BFC 的簡(jiǎn)單理解

Faremax 發(fā)布于2019-08-29 13:14 / 2665人閱讀

BFC 的擴(kuò)寫是 Block formatting contexts （塊級(jí)格式化上下文），它看不見摸不著但對(duì) CSS 盒模型有影響。
標(biāo)準(zhǔn)里對(duì) 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.

同時(shí)提到一個(gè)前端常見的 collapse 現(xiàn)象：

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

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

浮動(dòng)元素、絕對(duì)定位元素、非塊盒的塊容器（inline-block、table-cell、table-caption 元素）、overflow 不為 visible 的元素會(huì)創(chuàng)建 BFC

同一個(gè) BFC 里，兩個(gè)相鄰的塊級(jí)盒的垂直外邊距會(huì) collapse（塌陷）

也就是說(shuō)不同的 BFC之間就會(huì)消除相鄰元素的 collapse，以下是可創(chuàng)建 BFC 的條件：

div: float:left | right

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

div: position:absolute

這里寫了個(gè)測(cè)試 collapse 的 demo，經(jīng)測(cè)試發(fā)現(xiàn)：

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

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

參考：BFC 的文檔
原文：BFC 的簡(jiǎn)單理解

GPU云服務(wù)器云服務(wù)器簡(jiǎn)單理解超融合架構(gòu) bfc bfc布局云計(jì)算的理解

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112464.html

相關(guān)文章

淺析BFC

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

voyagelab 2019-08-29 15:06 評(píng)論0 收藏0
淺析BFC

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

My_Oh_My 2019-08-02 10:14 評(píng)論0 收藏0
關(guān)于CSS中設(shè)置overflow屬性的值為hidden的相關(guān)理解

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

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

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

miya 2019-08-30 15:43 評(píng)論0 收藏0
對(duì)BFC規(guī)范的理解

摘要：垂直方向的距離由決定。屬于同一個(gè)的兩個(gè)相鄰的會(huì)發(fā)生疊加，與方向無(wú)關(guān)。計(jì)算的高度時(shí)，浮動(dòng)子元素也參與計(jì)算。形成后出現(xiàn)的常見問(wèn)題重疊問(wèn)題浮動(dòng)相關(guān)問(wèn)題可以解決的問(wèn)題疊加的問(wèn)題，要阻止重疊，只要將倆個(gè)元素別放在一個(gè)中即可。 1. 什么是BFC BFC（block formatting context）：塊級(jí)格式化上下文。簡(jiǎn)單來(lái)說(shuō)它就是一種會(huì)影響元素與元素之間的位置、間距的屬性。 2. 如何觸...

pingan8787 2019-08-30 15:56 評(píng)論0 收藏0