鑰匙要點(diǎn)

• >塊格式上下文（BFC）是鋪設(shè)塊框的網(wǎng)頁(yè)的Visual CSS渲染的一部分。可以通過(guò)添加特定的CSS條件來(lái)創(chuàng)建它，例如“溢出：滾動(dòng)”，“顯示：flex”，“ float：左”等。
BFC可以導(dǎo)致邊緣崩潰，這意味著兩個(gè)兄弟姐妹盒之間的垂直距離不是其單個(gè)邊緣的總和。但是，創(chuàng)建新的BFC可以防止此保證金崩潰。
• BFC可用於包含浮子。在容器浮動(dòng)元素的情況下，定義BFC可以幫助包含這些元素並保持頁(yè)面的正常流程。 bfcs可以防止文本包裹在浮動(dòng)對(duì)像上。通過(guò)為段落元素建立新的BFC，它不再觸摸容器塊的左邊緣，從而阻止文本圍繞浮動(dòng)元素包裹。 >
bfcs也可以在多列佈局中有用。通過(guò)在佈局的一列中建立新的BFC，它將始終在填充之前的列後剩下的剩餘空間，以防止最後一列在某些瀏覽器中掉落到下一行。
>一個(gè)塊格式上下文是一個(gè)網(wǎng)頁(yè)的Visual CSS渲染的一部分，其中塊框在其中。其所屬的定位方案是正常流動(dòng)。根據(jù)W3C：
• 浮點(diǎn)，絕對(duì)位置的元素，內(nèi)聯(lián)塊，表格，表托機(jī)和具有“溢出”的元素，而不是“可見(jiàn)”（除非該值已傳播到視口）建立新的塊格式格式上下文。

>上面的報(bào)價(jià)幾乎總結(jié)瞭如何形成塊格式上下文。但是，讓我們以易於理解的方式重新定義它。塊格式上下文是一個(gè)滿足以下條件之一的HTML框：

浮點(diǎn)的值不是沒(méi)有

位置的值既不是靜態(tài)的，也不是相對(duì)

顯示的值是表格，表格，內(nèi)聯(lián)塊，flex或inline-flex

溢出的值不可見(jiàn)。
• 創(chuàng)建塊格式上下文
• >可以明確觸發(fā)塊格式上下文。因此，如果我們要?jiǎng)?chuàng)建一個(gè)新的塊格式上下文，我們只需要在上面提到的任何一個(gè)CSS條件中添加任何一個(gè)。 例如，查看以下html：
• 通過(guò)添加任何必要的CSS條件，例如溢出：滾動(dòng)，溢出：隱藏，顯示：flex，float：左或顯示：到容器的表格，可以創(chuàng)建一個(gè)新的塊格式上下文。儘管上述任何條件都可以創(chuàng)建塊格式化上下文，但也將還有其他一些效果：>
  • 顯示：表可能會(huì)在響應(yīng)中造成問(wèn)題
  • 溢出：滾動(dòng)可能顯示不需要的滾動(dòng)條
  • float：左將將元素推向左側(cè)，其他元素圍繞它
  • 溢出：隱藏的將剪輯元素溢出

  因此，每當(dāng)我們創(chuàng)建新的塊格式上下文時(shí)，我們都會(huì)根據(jù)要求選擇最佳條件。為了統(tǒng)一性，我使用了溢出：隱藏在本文中給出的所有示例中。

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  Some Content here
  <span><span><span></div</span>></span></span>

  >您可以隨意使用溢出以外的聲明：隱藏。

  在塊格式上下文中的盒子對(duì)齊

  w3c規(guī)格狀態(tài)：

  在塊格式上下文中，每個(gè)盒子的左邊緣觸摸包含塊的左邊緣（對(duì)於左至左格式，右邊緣觸摸）。即使在存在浮子的情況下，這也是正確的（儘管一個(gè)盒子的

  線框可能會(huì)因浮子而縮?。?，除非盒子建立一個(gè)新的塊格式化上下文（在這種情況下，盒子本身> may 由於浮子而變得狹窄）。

  

  在更簡(jiǎn)單的單詞中，正如我們?cè)谏蠄D中可以看到的那樣，屬於塊格式上下文的所有框都對(duì)齊（用於從左到右格式），其左外邊緣觸摸包含的左邊緣堵塞。在最後一個(gè)框中，我們可以看到，即使左側(cè)有一個(gè)浮動(dòng)元素（棕色），另一個(gè)元素（綠色）仍然觸摸了包含塊的左邊緣。關(guān)於為什麼發(fā)生這種情況的原則將在下面的文本包裝部分中討論。 >>

  塊格式上下文導(dǎo)致邊緣崩潰

  在正常流動(dòng)中，盒子是從包含塊的頂部開(kāi)始垂直放置的。兩個(gè)兄弟姐妹之間的垂直距離由兩個(gè)兄弟姐妹的各個(gè)邊緣確定，但不是兩個(gè)邊緣的總和。

  讓我們考慮一個(gè)示例，以理解這一點(diǎn)。

  >
  在上圖中，我們考慮了一個(gè)塊格式上下文，在紅色框（一個(gè)div）包含兩個(gè)綠色兄弟姐妹（p elements）的情況下。

  >相應(yīng)的CSS是：

  >

  理想情況下，兩個(gè)兄弟姐妹之間的邊緣應(yīng)該是兩個(gè)元素（20px）的邊緣的總和，但實(shí)際上是10px。這被稱為崩潰的邊緣。在兄弟姐妹邊緣不同的情況下，較高的邊距將佔(zhàn)上風(fēng)。

  <span><span>.container</span> {
  </span>  <span>overflow: hidden;
  </span><span>}</span>

  請(qǐng)參閱codepen上的sitepoint（@sitepoint）的筆ovzrer。

  使用塊格式上下文來(lái)防止保證金崩潰

  >首先，這聽(tīng)起來(lái)可能有些混亂，因?yàn)槲覀冊(cè)谏厦嬗懻摿藟K格式的上下文會(huì)導(dǎo)致保證金崩潰。但是，我們必須記住的一件事是，僅當(dāng)相鄰塊框（兄弟姐妹）之間的垂直邊緣僅在相同的塊格式上下文中崩潰。如果它們屬於不同的塊格式環(huán)境，那麼它們之間的邊距就不會(huì)崩潰。因此，通過(guò)創(chuàng)建一個(gè)新的塊格式上下文，我們可以防止保證金崩潰。

  >

  讓我們?cè)谳^早的示例中添加第三個(gè)兄弟姐妹，因此HTML變?yōu)椋?antml>

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  Some Content here
  <span><span><span></div</span>></span></span>

  相應(yīng)的CSS為：

  <span><span>.container</span> {
  </span>  <span>overflow: hidden;
  </span><span>}</span>

  >結(jié)果將與上面相同，即將崩潰，三個(gè)兄弟姐妹將以10px的垂直距離分開(kāi)。發(fā)生這種情況是因?yàn)樗腥齻€(gè)P標(biāo)籤都是相同塊格式上下文的一部分。
  現(xiàn)在，讓我們修改第三個(gè)兄弟姐妹，以便它是新的塊格式上下文的一部分。然後html變?yōu)椋?p>

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  <span><span><span><p</span>></span>Sibling 1<span><span></p</span>></span>
  </span>  <span><span><span><p</span>></span>Sibling 2<span><span></p</span>></span>
  </span><span><span><span></div</span>></span></span>

  和CSS：

  <span><span>.container</span> {
  </span>  <span>background-color: red;
  </span>  <span>overflow: hidden; /* creates a block formatting context */
  </span><span>}
  </span>
  <span>p {
  </span>  <span>background-color: lightgreen;
  </span>  <span>margin: 10px 0;
  </span><span>}</span>

  現(xiàn)在的輸出將有所不同：

  >由於第二和第三兄弟姐妹屬於不同格式的上下文，因此之間不會(huì)有任何差距，如以下演示中所示。

  請(qǐng)參閱codepen上的sitepoint（@sitepoint）的筆xbvoxp。

  使用塊格式上下文包含浮點(diǎn)

  >塊格式上下文可以包含浮子。很多時(shí)候，我們會(huì)遇到一個(gè)容器浮動(dòng)元素的情況。在這種情況下，容器元件沒(méi)有高度，其漂浮的孩子不在頁(yè)面正常流程之外。我們通常使用清晰的解決方案來(lái)解決此問(wèn)題，最受歡迎的方法是使用“清除”偽元素。但是，我們也可以通過(guò)定義塊格式上下文來(lái)實(shí)現(xiàn)這一目標(biāo)。 >
  讓我們看一個(gè)示例：

  與CSS：

  在上述情況下，容器將沒(méi)有任何高度，也不會(huì)包含浮子的孩子。為了解決此問(wèn)題，我們通過(guò)添加溢出來(lái)建立容器內(nèi)部的新塊格式化上下文：隱藏。修改後的CSS變?yōu)椋?p>
  現(xiàn)在，容器將包含浮動(dòng)的兄弟姐妹，其高度將擴(kuò)展到包含其子女，其元素又回到了此格式化上下文中頁(yè)面的正常流程。

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  <span><span><span><p</span>></span>Sibling 1<span><span></p</span>></span>
  </span>  <span><span><span><p</span>></span>Sibling 2<span><span></p</span>></span>
  </span>  <span><span><span><p</span>></span>Sibling 3<span><span></p</span>></span>
  </span><span><span><span></div</span>></span></span>

  >請(qǐng)參閱codepen上的sitepoint（@sitepoint）帶有和不帶有塊格式上下文的筆浮子。

  使用塊格式上下文來(lái)防止文本包裝

  >有時(shí)圍繞它周圍的浮動(dòng)div包裹的文本（如下圖中的圖1所示），但在某些情況下，這是不可取的，我們希望像圖2中的外觀一樣。要解決此問(wèn)題，我們可能會(huì)使用邊距，但是我們也可以通過(guò)塊格式上下文解決此問(wèn)題。

  

  首先讓我們理解為什麼文本包裹。為此，我們必須了解當(dāng)元素浮動(dòng)時(shí)框模型的工作原理。這是我之前留下的部分，同時(shí)討論塊格式上下文中的對(duì)齊方式。讓我們了解以下圖中圖1中發(fā)生的情況：

  

  該圖的HTML可以假定為：

  >

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  Some Content here
  <span><span><span></div</span>></span></span>

  上圖中的整個(gè)黑色區(qū)域表示P元素。如我們所見(jiàn)，P元素不會(huì)移動(dòng)，但它位於浮動(dòng)元素下。 P元素的線框（指文本行）會(huì)發(fā)生變化。因此，線框水平狹窄，以為浮動(dòng)元件騰出空間。

  隨著文本的增加，它最終會(huì)在浮動(dòng)元素下包裹，因?yàn)榫€框不再需要移動(dòng)，因此出現(xiàn)了像圖1的條件。這解釋了即使存在浮動(dòng)元件以及線框如何窄以適應(yīng)浮動(dòng)元件的範(fàn)圍，這些段落如何觸及包含框的左邊緣。

  如果我們能夠移動(dòng)整個(gè)P元素，則將解決此包裝問(wèn)題。

  >在進(jìn)入解決方案之前，讓我們?cè)俅位貞沇3C規(guī)範(fàn)所說(shuō)的內(nèi)容：>

  在塊格式上下文中，每個(gè)盒子的左邊緣觸摸包含塊的左邊緣（對(duì)於左至左格式，右邊緣觸摸）。即使在存在浮子的情況下，這也是正確的（儘管一個(gè)盒子的

  線框

  可能會(huì)因浮子而縮?。?，除非盒子建立一個(gè)新的塊格式化上下文（在這種情況下，盒子本身

  > may

  由於浮子而變得狹窄）。

  >根據(jù)此，如果P元素建立一個(gè)新的塊格式上下文，則它將不再觸摸容器塊的左邊緣。這可以通過(guò)簡(jiǎn)單地添加溢出：隱藏在P元素中來(lái)實(shí)現(xiàn)。這樣，創(chuàng)建一個(gè)新的塊格式上下文就解決了圍繞浮動(dòng)對(duì)象的文本問(wèn)題的問(wèn)題。 > 請(qǐng)參閱筆格式上下文，以防止codepen上的sitepoint（@sitepoint）。

  在多列佈局中使用塊格式上下文

  >如果我們創(chuàng)建一個(gè)跨越容器的全寬度的多列佈局，則最後一列有時(shí)會(huì)在某些瀏覽器中掉落到下一行。這可能會(huì)發(fā)生這種情況，因?yàn)闉g覽器正在圍繞列的寬度，並且總寬度比容器的寬度更大。但是，如果我們?cè)趤丫值囊涣兄薪⒘艘粋€(gè)新的塊格式上下文，則它將始終在填充之前的列後剩下的剩餘空間。

  。

  >讓我們使用一個(gè)帶有3列的多列佈局的示例：>

  這是html：

  <span><span><span><div</span> class<span>="container"</span>></span>
  </span>  Some Content here
  <span><span><span></div</span>></span></span>

  和CSS：

  <span><span>.container</span> {
  </span>  <span>overflow: hidden;
  </span><span>}</span>

  結(jié)果是在Codepen演示中：

  >請(qǐng)參閱使用塊格式上下文的筆，以在codepen上的sitepoint（@sitepoint）進(jìn)行最終列。

  現(xiàn)在，即使容器的寬度略有變化，佈局也不會(huì)破裂。當(dāng)然，這不一定是多列佈局的一個(gè)不錯(cuò)選擇，但這是防止最終列掉落問(wèn)題的一種方法。在這樣的情況下，F(xiàn)lexbox可能是一個(gè)更好的解決方案，但這應(yīng)該說(shuō)明在這種情況下元素的行為。

  結(jié)論

  我希望這篇文章向您展示了塊格式上下文的相關(guān)性，以及它們?nèi)绾斡绊戫?yè)面上元素的視覺(jué)定位。顯示它們?cè)趯?shí)際情況下使用的示例應(yīng)該使它們更加清楚。

  >

  如果您有任何要添加的內(nèi)容，請(qǐng)?jiān)谠u(píng)論中告訴我們。如果您想更深入地，請(qǐng)務(wù)必查看W3C對(duì)該主題的更詳細(xì)討論。

  >

  >常見(jiàn)問(wèn)題（常見(jiàn)問(wèn)題解答）有關(guān)CSS

  中的塊格式上下文

  >在CSS？

  塊格式上下文（BFC）中，塊格式上下文的重要性是什麼，是CSS中控製網(wǎng)頁(yè)上元素佈局的基本概念。它在元素的定位和樣式中起著至關(guān)重要的作用，尤其是在復(fù)雜的佈局中。 BFC有助於隔離文檔的部分，其中包含浮子，內(nèi)聯(lián)塊和表，這可以防止意外的元素重疊。了解BFC可以幫助開(kāi)發(fā)人員創(chuàng)建更健壯和可預(yù)測(cè)的設(shè)計(jì)。

  >

  >塊格式上下文如何影響浮動(dòng)元素的佈局？

  在BFC中，浮動(dòng)元素包含在上下文中，這意味著這意味著它們不會(huì)影響B(tài)FC之外的元素的佈局。當(dāng)您要防止文本或其他元素包裹浮動(dòng)元素時(shí)，這特別有用。通過(guò)創(chuàng)建新的BFC，您可以確保浮動(dòng)元素不會(huì)干擾其他元素的定位。

  >如何創(chuàng)建一個(gè)新的塊格式上下文？

  >有幾種方法可以在CSS中建立新的BFC。一些最常見(jiàn)的方法包括將CSS屬性“顯示”設(shè)置為“流根”，“ Flex”或“網(wǎng)格”，或?qū)ⅰ耙绯觥痹O(shè)置為“可見(jiàn)”以外的任何事物。創(chuàng)建新的BFC的其他屬性包括“包含”，如果其值為“佈局”，“油漆”或包括其中的複合值，以及“列計(jì)數(shù)”或“列寬度”，如果它們具有其他值而不是'auto '。

  塊格式上下文對(duì)邊緣的影響是什麼？

  >

  > BFC的關(guān)鍵特徵之一是它們可以防止邊緣崩潰。在CSS中，相鄰的垂直邊緣有時(shí)會(huì)塌陷成一個(gè)邊緣，這是單個(gè)邊緣的最大邊緣。但是，在BFC中，第一個(gè)孩子的最高邊緣和最後一個(gè)孩子的底部邊緣不會(huì)隨BFC本身的邊緣而崩潰。這對(duì)於控制元素的間距可能很有用。

  >塊格式上下文如何處理溢出？

  當(dāng)元素的內(nèi)容溢出其框時(shí)，BFC可以幫助管理此溢出。如果元素創(chuàng)建了新的BFC，則任何溢出都會(huì)被剪切到BFC，而不是溢出。可以使用“溢出”屬性來(lái)控制這一點(diǎn)，並具有諸如'auto'，'scroll'或'hidend''之類的值。

  塊格式上下文如何影響“ clear”屬性？ CSS中的“透明”屬性用於控制浮動(dòng)元素的流動(dòng)。在BFC中，“清除”屬性僅影響同一BFC內(nèi)的元素。這意味著具有“清除”集的元素不會(huì)在父bfc中的浮標(biāo)下方移動(dòng)，只有在其自己的bfc中浮動(dòng)。

  可以嵌套格式化上下文嗎？彼此嵌套。每個(gè)BFC獨(dú)立於其父母和兄弟姐妹BFC運(yùn)作。這意味著每個(gè)BFC中都包含浮子，邊距和其他佈局特徵，並且不影響其他BFC中的元素。

  >

  塊格式化上下文如何與flex和網(wǎng)格佈局相互作用？ CSS中的flex和網(wǎng)格佈局會(huì)自動(dòng)創(chuàng)建新的BFC。這意味著它們包含浮子，並以與其他BFC相同的方式防止邊緣塌陷和溢出。因此，了解BFC可以有助於理解Flex和Grid佈局的行為。

  >

  >塊格式化上下文和堆疊上下文之間的關(guān)係是什麼？

  bfc和堆疊上下文是CSS中的兩個(gè)獨(dú)立概念，但它們可以在某些情況下進(jìn)行互動(dòng)。例如，可以由具有“相對(duì)”或“絕對(duì)”的“位置”值和“ z index”值的元素創(chuàng)建新的堆疊上下文。這可能會(huì)影響B(tài)FC中元素的渲染，尤其是與浮子和重疊有關(guān)的元素。

  >是否存在塊格式上下文的瀏覽器兼容性問(wèn)題？

  大多數(shù)現(xiàn)代瀏覽器正確且一致地處理BFC。但是，較舊的瀏覽器，尤其是Internet Explorer可能存在一些差異。在多個(gè)瀏覽器中測(cè)試您的佈局始終是一個(gè)好主意，以確保它們的表現(xiàn)如預(yù)期的。

以上是了解CSS中的塊格式環(huán)境的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！