BFC的學習

       網上有許多關於BFC的文章，看得我眼花繚亂，似懂非懂，因此本身寫一篇BFC的文章，加深本身的記憶力，也但願能幫到你們。

       首先咱們要了解什麼是BFC，BFC全稱是Box  Formatting  Content，即塊級格式化上下文。它是CSS2.1規範定義的，關於CSS渲染定義的一個概念。在講BFC以前，咱們還要了解什麼是Box、Formatting  Content，以及視覺格式化模型。在個人上一篇文章中詳細講了視覺格式化模型和Box，因此如今很少說。

1、Box：CSS的佈局的基本單位

       Box是CSS佈局的對象和基本單位，直觀點來講，就是一個頁面是由不少個Box組成的。元素的類型和display屬性，決定了這個Box的類型。不一樣類型的Box，會參與不一樣的Formatting  Content（一個決定如何渲染文檔的容器），所以Box內的元素會以不一樣的方式渲染。盒子的類型有：

       block-level  box：display屬性爲block，list-item，table的元素，會生成block-level  box。而且參與block  formatting  context

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

2、Formatting  Context

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

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

3、BFC的生成

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

一、什麼樣的元素能生成BFC？

       CSS2.1中規定，知足下列CSS聲明之一的，即可以生成BFC：

             設置除float：none之外的屬性值（如：left/right）

             設置除overflow：visible之外的屬性值（如：hidden/auto/scroll）

             設置display屬性值爲：inline-block/flex/inline-flex/table-cell/table-caption

             設置position屬性：absolute/fixed

             設置fieldset元素（能夠給表單元素設置環繞邊框的html元素）

二、生成BFC後會怎麼樣？

       BFC佈局規則：

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

             Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊

             每一個元素的margin  box的左邊，與包含塊border  box的左邊相接觸（對於從左往右的格式化，不然相反）。即便存在浮動也是如此。

             BFC的區域不會與float  box重疊

             BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此

             計算BFC的高度時，浮動元素也參與計算

三、BFC的做用是什麼?

        防止margin重疊

               同一個BFC中倆個相鄰的box纔會發生重疊與方向無關，不過因爲上文提到的第一條限制，咱們甚少看到水平方向的margin重疊。這在IE這中是個特例，IE能夠設置write-mode。

               要阻止margin重疊，只要將倆個元素別放在一個BFC中便可（能夠用上文提到的方式讓相鄰元素其中一個生成BFC）。阻止倆個相鄰元素的重疊看起來沒有意義，主要用於嵌套元素。

         清除浮動

                使得父元素包含子元素，常見的方式是爲父元素設置overflow：hidden或者浮動父元素。根本緣由在於建立BFC的元素，子浮動元素也會參與高度計算，即不會產生高度塌陷的問題。 

         多欄佈局

                每一個元素的margin  box的左邊，與包含塊border  box的左邊相接觸