理解 CSS 佈局和塊級格式化上下文

CSS佈局中有一些概念是你一旦理解它那麼就會極大的提高你的 CSS 技能的。這篇文章是關於塊級格式化上下文的 BFC 。也許你從未據說過這個術語，可是若是你曾經用 CSS 作過佈局，那麼你也許知道它是什麼。理解什麼是 BFC ，它爲何會起做用以及如何建立一個有用的 BFC 能夠幫助你理解 CSS 佈局是怎樣工做的。

在這篇文章中，我將經過一些你可能熟悉的例子解釋什麼是 BFC 。我將向你展現一個新的概念，當你明白什麼是 BFC 以及你爲何須要它的時候，它才真正有意義。

什麼是 BFC?

最容易明白一個 BFC 表現的是一個浮動的例子。在下面的例子中有一個盒模型，其中包含一張左浮動的圖和一些文字。若是咱們有大量的文字，它環繞在浮動的圖像上，則邊框會圍繞着整個區域。

<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;
}

圖1：文本環繞着浮動元素

若是刪除了一些文本，那麼文本就不足以環繞圖像，而且由於圖片浮動脫離了文檔流，邊框就會在圖片下面而且上升到文本的高度。

圖2：沒有足夠的文本，邊框就不能到達浮動元素所指望的高度

這是由於當咱們在浮動一個元素時，文本所在的盒模型仍然是固定的高度，而因浮動元素而縮短的空間是文本的行框。這就是爲何背景和邊框會出如今浮動元素的後面。

這裏有兩種咱們一般修復這種問題的方式。一種是使用清除浮動 clearfix hack [1]，它是經過在文本和圖片下面插入一個元素而且設置清除兩側浮動來起做用的。另外一種方式是使用 overflow屬性，使用其餘的值來代替默認的 visible 。

.outer {
  overflow: auto;
}

圖3：使用 overflow:auto 使盒模型中包含浮動

overflow 屬性起做用的緣由是使用任何一個其餘值來代替初始值 visible ，從而建立一個 BFC 。即 BFC 的一個特色就是它包含浮動。

BFC 佈局是一個迷你佈局

你能夠認爲 BFC 在網頁中是一個迷你佈局。一旦一個元素建立的 BFC ，全部東西都包含在裏面了。正如咱們所看到的，它包含浮動元素使其再也不超出盒子底部。同時 BFC 也產生了一些其餘有用的行爲。

BFC 防止外邊距塌陷

理解外邊距塌陷是另外一個被低估的 CSS 技能。在下一個例子中，有一個灰色背景的 div 。這個 div 中有兩個段落。外層 div 有 40px 的下邊距；每個段落也分別有 20px 的上下邊距。

.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 的外邊距之間沒有任何東西而致使它們摺疊，使 p 段落最後會與盒子的頂部和底部平齊。因此在 p 段落的上面和下面咱們沒有看到任何灰色。

圖4：外邊距塌陷致使在盒子的頂部和底部看不到任何灰色

若是咱們對盒模型應用 BFC ，那麼它將包括段落和邊距並使之不會塌陷，因此咱們將在邊距的後面看到灰色的背景。

.outer {
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

圖5：使用BFC外邊距將不會塌陷

BFC 再一次使元素包含在其中，阻止其外邊距塌陷或超出盒模型。

BFC 阻止內容環繞浮動元素。

你也會熟悉 BFC 這種行爲，就是它如何在使用浮動的多列布局中工做的。若是一個項目建立了 BFC ，那麼它將不會環繞任何浮動元素，好比在下面的示例中有這樣的標記：

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

帶有 float 類的元素開始浮動，而後 div 中的文本會環繞在浮動元素周圍。

圖6：文本環繞浮動元素

那麼可使用經過對文本使用 BFC 來阻止其環繞行爲。

.text {
  overflow: auto;
}

圖7：div 包含的文本使用了 BFC 使之中止環繞

這是咱們建立多列浮動佈局經常使用的方式。浮動一個元素同時也爲另外一個元素建立了 BFC ，因此當右邊的元素比左邊高時，建立的列也再也不嘗試環繞對方。

還有什麼方式能夠建立 BFC?

除了使用 overflow 屬性之外，其餘一些 CSS 屬性也能夠建立 BFC 。正如咱們看到的，浮動一個元素也建立了 BFC ，因此浮動項目將包含裏面的任何元素。

其餘方式還有使用 position: absolute ， position: fixed ，使用 display: inline-block， display: table-cell 及 display: table-caption ，其中 table-cell 以及 table-captions是 HTML 元素的默認屬性，因此若是有一個 table 數據，那麼它的每一個格子都將建立 BFC 。 column-span: all 多被使用在多列布局中。 Flex 和 Grid 項目也會建立相似的 BFC ，它們分別被描述爲 Flex 格式化上下文和 Grid 格式化上下文，這分別反映了不一樣的佈局類型。 BFC 表示塊級佈局， FFC 表明 Flex 佈局。在實際項目中結果是同樣的，都是包含浮動而且外邊距不會發生塌陷。

建立 BFC 新方式

使用 overflow 屬性或其餘方式建立 BFC 有兩個問題。第一，這些方法對於它們真正的用途會產生反作用。使用 overflow 屬性建立一個 BFC 而且包含浮動，可是在某些狀況下你可能會發現獲得一個了沒必要要的滾動條，或者陰影被剪掉了。這是因爲 overflow 屬性本質上是告訴瀏覽器在溢出的狀況下應該怎樣作—產生滾動條或者剪掉元素。瀏覽器實際上作了你讓它作的工做！

即便在沒有任何反作用的狀況下，使用 overflow 屬性也可能會讓另外一個開發人員感到困惑。爲何 overflow 屬性設置爲自動或滾動？開發者最初的目的是什麼？他們但願在這個組件上使用滾動條嗎？怎樣建立一個 BFC 是行之有效的？應該是沒有形成其餘行爲而創造出迷你的佈局， 或者保證是在安全範圍內的，它將不會引起任何意想不到的問題，而且開發人員的意圖也很清晰。 CSS 工做組認爲有一個很方便的新的 display 屬性: flow-root 。

你能夠在任何狀況下使用 display: flow-root ，它將會建立一個新的有用的 BFC ，它包含浮動，阻止外邊距塌陷，而且阻止元素環繞浮動。

你能夠在下面的 CodePen 中看到上述全部的這些， 若是你的瀏覽器支持 display: flow-root的話，如目前流行的火狐或谷歌瀏覽器。

圖8：支持 display: flow-root 屬性的瀏覽器

支持這個屬性的瀏覽器是有限的，但若是你認爲這將是方便的，你能夠去支持它。然而，即便目前你不可以在你的代碼很流利的使用 flow-root 功能，但你如今明白了 BFC 是什麼，以及當你使用 overflow 屬性或其它方法包含浮動的時候你明白了你在作什麼。瞭解這樣一個事實：好比 BFC 將阻止元素環繞浮動，這在不支持的瀏覽器中想建立 Flex 或 Grid 佈局的時候都是很是有用的。

你已經瞭解了一些關於瀏覽器如何佈置 Web 頁面的基本原理，這看起來彷佛可有可無，但卻能夠加快建立和調試 CSS 佈局的時間。

原文連接：https://www.jianshu.com/p/5ab...