塊級格式化BFC指的是什么

小編給大家分享一下塊級格式化BFC指的是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

我們先來看一下什么是BFC？

使用簡單的float示例最容易理解塊級格式化上下文（BFC）的行為。在下面的示例中，將設(shè)置一個框，其中包含左側(cè)浮動的圖像和一些文本。如果我們有大量文本，它會圍繞浮動圖像，然后邊界將文本和圖像圍在里面。

<div class="outer">
      <div class="float">I am a floated element.</div>
      I am text inside the outer box.
    </div>

.outer {
      border: 5px dotted rgb(214,129,137);
      border-radius: 5px;
      width: 450px;
      padding: 10px;
      margin-bottom: 40px;
    }
    .float {
      padding: 10px;
      border: 5px solid rgba(214,129,137,.4);
      border-radius: 5px;
      background-color: rgba(233,78,119,.4);
      color: #fff;
      float: left;  
      width: 200px;
      margin: 0 20px 0 0;
    }

效果如下：

如果刪除了一些文本讓文字不圍繞圖像，因為浮動從文檔流中取出，邊框會上升并在圖像下方運(yùn)行到文本的高度。效果如下：

發(fā)生上述情況是因為當(dāng)我們讓元素浮動時，文本所在的框保持相同的寬度，縮短為浮動元素騰出空間的是文本的行框。這就是為什么背景和邊框似乎在我們的浮動后面運(yùn)行的原因。

我們通常有兩種方法來解決這種布局問題。一種方法是使用clearfix hack，它具有在文本和圖像下方插入元素并將其設(shè)置為清除兩者的效果。另一種方法是使用overflow屬性，不是用默認(rèn)值visible。

.outer {
      overflow: auto;
    }

溢出以這種方式工作的原因是因為使用除初始值之外的任何值visible創(chuàng)建塊級格式化上下文，并且BFC的一個特征是它包含浮點(diǎn)數(shù)。

BFC可以看做是大布局中的一個小布局

您可以將BFC視為頁面內(nèi)的迷你布局。元素創(chuàng)建BFC后，其中包含所有內(nèi)容，正如我們所看到的，包括不再從盒子底部溢出的元素。BFC還會實現(xiàn)一些其他有用的行為。

BFC可以防止邊距坍塌

了解邊距折疊是另一種被低估的CSS技能。在下一個示例中，我將設(shè)置一個背景顏色為灰色的div。

這個div里面有兩個段落，外部div元素的邊緣底部為40像素; 段落的上下邊距為20像素。

.outer {
       background-color: #ccc;
      margin: 0 0 40px 0;
    }
    p {
      padding: 0;
      margin: 20px 0 20px 0;
      background-color: rgb(233,78,119);
      color: #fff;
    }

由于p元素的邊緣和外部div上的邊距之間沒有任何東西，因此兩個部分將會坍塌，因此段落最終與框的頂部和底部齊平。我們在段落的上方和下方看不到任何灰色，如下圖

但是，如果我們利用BFC，那么它將包含段落及其邊距，因此它們不會崩潰，我們可以看到邊緣后面的容器的灰色背景，如下圖

BFC再一次完成了包含內(nèi)部事物的工作，阻止了邊距的坍塌。

BFC停止內(nèi)容包裝浮動。

你要熟悉BFC的這種行為，因為它是使用浮點(diǎn)數(shù)的任何列類型布局的工作方式。如果項目創(chuàng)建BFC，則該項目不會包裝任何浮動。在以下示例中，我有這樣的標(biāo)記：

<div class="outer">
      <div class="float">I am a floated element.</div>
      <div class="text">I am text</div>
    </div>

具有浮動的項目向左浮動，因此div中的文本在它包圍浮動之后出現(xiàn)。

還可以通過使包裝文本的div成為BFC來防止環(huán)繞行為。

.text {
      overflow: auto;
    }

效果如下：

這基本上是我們可以創(chuàng)建具有多個列的浮動布局的方式。浮動項目還會為該項目創(chuàng)建BFC，因此如果右側(cè)的列高于左側(cè)的列，則我們的列不會嘗試相互環(huán)繞。

還有什么可以創(chuàng)造一個BFC？

除了用于overflow創(chuàng)建BFC之外，其他一些CSS屬性還會創(chuàng)建BFC。正如我們所看到的，浮動元素會創(chuàng)建一個BFC。因此，您的浮動項目將包含其中的任何內(nèi)容。

使用position: absolute或position: fixed在元素上。

使用display: inline-block，display: table-cell或display: table-caption。該table-cell和table-captions為這些HTML元素的默認(rèn)，所以如果你有一個數(shù)據(jù)表，例如，每個單元將創(chuàng)建一個BFC。

使用column-span: all，用于跨越多列布局的列。Flex和Grid項也會創(chuàng)建類似BFC的內(nèi)容，除了它們分別被描述為Flex格式上下文和網(wǎng)格格式上下文。這反映了每個參與的布局類型。塊格式化上下文表示該項目正在參與塊布局，F(xiàn)lex格式上下文表示該項目正在參與Flex布局。在實踐中，結(jié)果是相同的，包含浮點(diǎn)數(shù)并且邊距不會坍塌。

創(chuàng)建BFC的新方法

使用溢出或其他一些方法來創(chuàng)建BFC有兩個問題。首先，這些方法具有基于它們真正設(shè)計的副作用。overflow方法創(chuàng)建一個BFC并包含浮點(diǎn)數(shù)，但在某些情況下，您可能會發(fā)現(xiàn)有一個不需要的滾動條，或者剪切了陰影。這是因為溢出屬性旨在讓您告訴瀏覽器在溢出情況下要做什么 - 導(dǎo)致滾動條或剪輯內(nèi)容。瀏覽器完全按照你的要求做了！

即使在沒有任何不必要的副作用的情況下，使用溢出也可能讓另一個開發(fā)人員感到困惑。為什么溢出設(shè)置為自動或滾動？原始開發(fā)者的意圖是什么？他們想要這個組件上的滾動條嗎？

什么是有用的將是一種創(chuàng)建BFC的方法，該BFC在其他方面是惰性的，不會產(chǎn)生其他行為，只能創(chuàng)建迷你布局，以及安全地在其中發(fā)生事情的能力。該方法不會引起任何意外問題，也可以明確開發(fā)人員的意圖。CSS工作組認(rèn)為這可能非常方便，因此我們有一個新的display屬性值- flow-root。

您可以display: flow-root在本文的任何情況下使用，其中創(chuàng)建新的BFC將是有利的 - 包含浮動，防止邊緣折疊，或防止物品包裹浮動。

如果您的瀏覽器支持display: flow-root最新的Firefox或Chrome，您可以在下面的代碼中看到所有這些內(nèi)容。

<h3>Containing floats</h3>

<div class="ex1">
  <div class="ex1-float">I am a floated element.</div>
  I am text inside the outer box.
</div>
<h3>Prevent margin collapsing</h3>

<div class="ex2">
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>
  <p>I am paragraph two and I have a margin top and bottom of 20px;</p>
</div>
<h3>Prevent float wrapping</h3>
<div class="ex3">
  <div class="ex3-float">I am a floated element.</div>
  <div class="ex3-text">
  I am text inside a div nested inside the outer box. I have overflow auto which makes me a BFC and therefore I do not wrap.
  </div>
</div>

* { box-sizing: border-box; }

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 1.4em Arial, sans-serif;
}
/** example 1*/
.ex1 {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
  display: flow-root;
}
.ex1-float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}
/* example 2*/
.ex2 {
  background-color: #ccc;
  margin: 0 0 40px 0;
  display: flow-root;
}
.ex2 p {
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}
/* example 3 */
.ex3 {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}
.ex3-float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}
.ex3-text {
  display: flow-root;
}

瀏覽器對此值的支持是有限的，但是如果您認(rèn)為它會很方便，那么請繼續(xù)在Edge中投票。但是，即使您現(xiàn)在無法在代碼中使用方便的流根功能，您現(xiàn)在也可以了解BFC是什么，以及當(dāng)您使用溢出或其他方法來包含浮點(diǎn)數(shù)時您正在做什么。例如，如果要在非支持的瀏覽器中為flex或網(wǎng)格布局創(chuàng)建回退，那么理解BFC將停止包裝浮動項的事實非常有用。

您還可以理解在瀏覽器如何布局網(wǎng)頁方面非常重要的內(nèi)容。雖然它們本身似乎無關(guān)緊要，但正是這些小知識可以加快創(chuàng)建和調(diào)試CSS布局所需的時間。

看完了這篇文章，相信你對塊級格式化BFC指的是什么有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！