面試題get-1 什麼是BFC?造成 BFC 的條件是什麼？BFC常見做用詳解

一.什麼是BFC

BFC(block formatting context）：簡單來講，BFC 就是一種屬性，這種屬性會影響着元素的定位以及與其兄弟元素之間的相互做用。

中文常譯爲塊級格式化上下文。是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。 在進行盒子元素佈局的時候，BFC提供了一個環境，在這個環境中按照必定規則進行佈局不會影響到其它環境中的佈局。好比浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。 也就是說，若是一個元素符合了成爲BFC的條件，該元素內部元素的佈局和定位就和外部元素互不影響(除非內部的盒子創建了新的 BFC)，是一個隔離了的獨立容器。（在 CSS3 中，BFC 叫作 Flow Root）。

二. 造成 BFC 的條件

一、浮動元素，float 除 none 之外的值；

二、絕對定位元素，position（absolute，fixed）；

三、display 爲如下其中之一的值 inline-blocks，table-cells，table-captions；

四、overflow 除了 visible 之外的值（hidden，auto，scroll）。

示例

<div class="outer">
    <div class="float">float 浮動對象</div>
    使用簡單的float示例最容易理解塊級格式化上下文（BFC）的行爲。在下面的示例中，
    將設置一個框，其中包含左側浮動的圖像和一些文本。若是咱們有大量文本，它會圍繞浮動圖像
    ，而後邊界將文本和圖像圍在裏面。
  </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;
    }
複製代碼

效果以下

若是刪除了一些文本讓文字不圍繞圖像，由於浮動從文檔流中取出，邊框會上升並在圖像下方運行到文本的高度。

效果以下：

發生上述狀況是由於當咱們讓元素浮動時，文本所在的框保持相同的寬度，縮短爲浮動元素騰出空間的是文本的行框。這就是爲何背景和邊框彷佛在咱們的浮動後面運行的緣由。

咱們一般有兩種方法來解決這種佈局問題。一種方法是使用clearfix hack，它具備在文本和圖像下方插入元素並將其設置爲清除二者的效果。另外一種方法是使用overflow屬性，不是用默認值visible。

.outer {
    overflow: auto;
    }
複製代碼

溢出以這種方式工做的緣由是由於使用除初始值以外的任何值visible建立塊級格式化上下文，而且BFC的一個特徵是它包含浮點數。

BFC能夠看作是大布局中的一個小布局

您能夠將BFC視爲頁面內的迷你佈局。元素建立BFC後，其中包含全部內容，正如咱們所看到的，包括再也不從盒子底部溢出的元素。BFC還會實現一些其餘有用的行爲。

BFC能夠防止邊距坍塌

瞭解邊距摺疊是另外一種被低估的CSS技能。在下一個示例中，我將設置一個背景顏色爲灰色的div。

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

.outers {
  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？

除了用於overflow建立BFC以外，其餘一些CSS屬性還會建立BFC。正如咱們所看到的，浮動元素會建立一個BFC。所以，您的浮動項目將包含其中的任何內容。

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

使用display: inline-block，display: table-cell或display: table-caption。該table-cell和table-captions爲這些HTML元素的默認，因此若是你有一個數據表，例如，每一個單元將建立一個BFC。

使用column-span: all，用於跨越多列布局的列。Flex和Grid項也會建立相似BFC的內容，除了它們分別被描述爲Flex格式上下文和網格格式上下文。這反映了每一個參與的佈局類型。塊格式化上下文表示該項目正在參與塊佈局，Flex格式上下文表示該項目正在參與Flex佈局。在實踐中，結果是相同的，包含浮點數而且邊距不會坍塌。

建立BFC的新方法

使用溢出或其餘一些方法來建立BFC有兩個問題。首先，這些方法具備基於它們真正設計的反作用。overflow方法建立一個BFC幷包含浮點數，但在某些狀況下，您可能會發現有一個不須要的滾動條，或者剪切了陰影。這是由於溢出屬性旨在讓您告訴瀏覽器在溢出狀況下要作什麼 - 致使滾動條或剪輯內容。瀏覽器徹底按照你的要求作了！

即便在沒有任何沒必要要的反作用的狀況下，使用溢出也可能讓另外一個開發人員感到困惑。爲何溢出設置爲自動或滾動？原始開發者的意圖是什麼？他們想要這個組件上的滾動條嗎？

什麼是有用的將是一種建立BFC的方法，該BFC在其餘方面是惰性的，不會產生其餘行爲，只能建立迷你佈局，以及安全地在其中發生事情的能力。該方法不會引發任何意外問題，也能夠明確開發人員的意圖。CSS工做組認爲這可能很是方便，所以咱們有一個新的display屬性值- flow-root。

您能夠display: flow-root在本文的任何狀況下使用，其中建立新的BFC將是有利的 - 包含浮動，防止邊緣摺疊，或防止物品包裹浮動。

學習及分享 by 牀頭牀尾
複製代碼