BFC詳解

BFC基本認識：

　　在學習BFC以前，咱們有必要清除了解BFC究竟是什麼東東。BFC，中文名字叫作「塊級格式化上下文」，英文是「block formatting content」，因此咱們要在block、formatting content兩方面來認識BFC。

1.box

　　說到block，那麼咱們首先須要認識css中的box，總所周知，box是css中重要的一個佈局基本單位，直觀來講一個網頁的組成是由衆多的box組成的。元素的類型和display屬性有關；不一樣類型的box，會參與不一樣的formatting content（一個決定如何渲染文檔的容器），所以box中的元素會以不一樣的方式進行渲染。而咱們所知道的元素類型基本分爲以下三種類型：block-level 塊級元素、inline-block-level 行內塊元素，inline-level 行內元素。咱們主要看盒子：

1. block-level box：塊級元素盒子；display屬性的值爲：block、list-item、table 的元素，會生成block-level box，而且參與block formatting content。
2. inline-level box：行內塊元素盒子；display屬性值爲：inline-block、inline、inline-table的元素，會生成inline-block box，而且參與block formatting content。
3. run-in box： 這是C3纔有，如今不討論，由於基本不會使用到。

2.formatting content

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

　　CSS2.1中只有BFC和IFC，CSS3中還增減了GFC和FFC。

3.BFC定義

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

　　官方解析：BFC是W3C CSS2.1 規範中的一個概念，它決定了元素如何對齊內容進行定位，以及與其餘元素的關係和相互做用。當涉及到可視化佈局的時候，block formatting content 提供了一個環境，HTML元素在這個環境中按照必定的規則進行佈局。一個環境中的元素不會影響到其餘環境中的佈局。不如浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素的影響，兩個浮動元素之間是互不影響的。這裏有點相似一個BFC就是一個獨立的行政單位的意思，也能夠說BFC就是一個做用範圍。能夠把它理解成一個獨立的容器，而且這個容器裏面的box佈局，與這個容器外的絕不相干。

　　另一種通俗的解釋是：在普通流中的box屬於一種formatting content，類型能夠是block或者是inline，但不能同時屬於二者。而且，block boxes（塊框）在block formatting content 裏格式化，inline boxes（塊內框）則在inline formatting content裏格式化。任何被渲染的元素都屬於一個box，而且不是block，就是inline。即便是未被任何元素包裹的文本，根據不一樣的狀況，也會屬於匿名的block boxes或者inline boxes。因此上面的描述，便是把全部的元素劃分到對應的formatting content裏。

4.BFC的佈局規則

• 內部的box會在垂直方向上，一個接一個地放置
• box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰的box的margin會發生重疊。
• 每一個元素的margin-box的左邊，與包含塊border-box的左邊相接觸（對於從左到右的格式化，不然相反）。即便存在浮動也是如此。
• BFC的區域不會與float box重疊。（在移動端開發中，經常使用這個特性來實現兩個box左右排列）

關於這幾天規則的幾點說明：

　　當容器有足夠的剩餘空間容納BFC的寬度時全部瀏覽器都會將BFC放置在浮動元素所在行的剩餘空間內。

　　當BFC的寬度大於容器剩餘寬度時，最新版本的瀏覽器中只有firefox會在同一行顯示，其餘瀏覽器均換行。

• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然。
• 計算BFC的高度是，浮動元素也參與計算。

哪些元素會生成BFC

• 根元素
• float屬性部位none
• position爲absolute或fixed
• display爲inline-block、table-cell、table-caption、Flex、inline-Flex
• overflow部位visible