BFC --- Block Formatting Context --- 塊級格式化上下文

時間 2019-11-13

標籤 bfc block formatting context 格式化上下文简体版

原文原文鏈接

　　雖然知道塊級格式化上下文是什麼東西，但要我把這個東西給說清楚，還真的不是一件容易的事兒，因此這篇文章我就要說說清楚到底什麼使傳說中的BFC，即塊級格式化上下文。html

1、BFC的通俗理解

　　通俗的理解 --- 佈局的時候，BFC提供了一個環境，一些HTML元素在這個環境中按照必定規則進行佈局，而這個BFC提供的環境中的元素不會影響到其它環境中的佈局。爲了讓咱們有個感性的認識，舉個不太合適的例子。你能夠把一個BFC想象成大的集裝箱，這個集裝箱裏裝的貨物就是一些HTML元素。在現實生活中爲了不不一樣人的貨物相互混淆（代碼不要亂），都是把貨物包裝好（一個一個的元素）再裝入集裝箱，這樣的話不管你包裝裏面的貨物（集裝箱中的元素）怎麼擺放（佈局），都不會影響到其餘人的貨物（其餘的集裝箱和其中的貨物）。那麼這個集裝箱就能夠被想象成Block Formatting Context。來源ide

BFC的三個做用（使用Overflow: hidden；觸發BFC）：佈局

自適應的兩欄佈局。 (BFC不會和float的元素重疊，由於BFC元素不會影響到外部，因此說若是覆蓋了float，實際上就是BFC在影響同級的外部元素了)

清楚浮動。（父元素觸發BFC，那麼BFC內的float元素高度也會參與計算。由於BFC內部不能影響到外部，因此觸發BFC以後會造成包裹。若是不包裹，那麼顯然BFC會影響外部元素的佈局的。）

消除margin重疊。兩個div，若是在數值方向上使用了margin，則重疊；可是，若是咱們使用overflow觸發這兩個div的BFC，那麼這兩個div就不會相互相應了。

核心：BFC元素不會影響外部，外部也不會影響BFC元素。flex

2、Formatting Context

　　Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。ui

3、BFC定義

　　BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。　　

　　補充：spa

　　block-level box:display 屬性爲 block, list-item, table 的元素，會生成 block-level box。而且參與 block fomatting context；code

　　inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素，會生成 inline-level box。而且參與 inline formatting context；orm

4、 BFC的佈局規則

　　剛剛咱們已經介紹了BFC是什麼，而且說BFC內部的Block-Level Box都會按照相應的規則進行佈局，那麼這個規則是什麼呢？htm

　　1.內部的Box會在垂直方向，一個接一個地放置。blog

　　2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊（例子：夢想天空）

　　3.每一個元素（全部元素）的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此（例子：夢想天空）。
　　4.BFC的區域不會與float box重疊。
　　5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
　　6.計算BFC的高度時，浮動元素也參與計算（例子夢想天空）。

　　來源

　　紅色部分，我認爲是BFC的三大特性。

5、怎麼樣會觸發BFC

　　BFC 由下列狀況之一建立：

　　
　　7.display: inline-block、flex均可以觸發BFC、
　　8.overflow ： hidden、auto、scrool均可以觸發BFC

　　來源

　　在個人博文《深刻理解margin-top》也對此有必定的介紹，主要是用於解決margin-top的塌陷問題。

6、BFC的做用和原理

　　1. 自適應兩欄佈局

　　2. 清楚內部浮動

　　這一部分就看夢想天空的博文吧！講的是在太好，是我模仿不來的啊~

　　　　連接到原文

7、更詳細的解釋。

　　咱們知道BFC，即Block Formatting Context，即塊級格式化上下文，它會獨立渲染一個元素，這個BFC裏的元素按照必定的規則排列，BFC內部的元素不會影響到外部的元素，外部的元素也不會影響到內部的元素。

　　好比，咱們兩個div，分別設置高度和寬度，按照文檔流的規則，必定是換行的形式，上下排列的，可是，若是咱們把上面的div的float屬性設置爲float: left；那麼下面的div就會向上移動，而且float在上面覆蓋。

　　若是咱們在上面的div外層再添加一個div，並把這個div添加屬性 overflow: hidden；這時候就會觸發外層div的BFC，根據BFC的計算高度要包括內部的float元素的高度，這時就能夠清除浮動了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>block formatting context</title>
  <style>
    div.wrap {
      overflow: hidden;
    }
    div.first {
      float: left;  
      width: 300px;
      height: 300px;
      background: red;
    }
    div.second {
      width: 500px;
      height: 400px;
      background: pink;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="first"></div>
  </div>
  <div class="second"></div>
</body>
</html>