如何建立塊級格式化上下文？塊級格式化內容相關的作用

css中塊級格式化上下文是什嗎？塊級格式化上下文（Block Formatting Context）是網頁CSS視覺渲染的一部分，並用於決定塊盒子的布局。在定位體系（Positioning Scheme）中它屬於常規流（Normal Flow），那麼如何建立塊級格式化上下文？建立塊級格式化需要滿足哪些條件？本文將給你一一說明。

FC(Formatting Context)翻譯過來就是格式化上下文/格式化範圍，指的是頁面配置中的一塊地區，它擁有自己的渲染規則，決定自己的子項目如何布局，並和其他元素的關係和作用。

根據css顯示分類，xhtml元素被分為三種類型：塊狀元素，內嵌元素，可變元素。給頁面元素加樣式的時候我們得知道這個元素是什麼類型，然後可以自己對元素類型轉化。就像我們可以通過display來讓某個內嵌元素變成塊狀元素（display：block）。有幾個特別的元素img，input預設是inline-block；

什麼是塊狀格式化上下文（BFC）？相當於一個特殊的地區。

如果一個元素符合了成為BFC的條件，該元素成為一個隔離了的獨立容器，元素內部元素會垂直的沿著其父元素的邊框排列，和外部元素互不影響 。

觸發 BFC 的條件如下：

1、浮動元素，float 除 none 以外的值

2、絕對位置元素，position（absolute，fixed）

3、display 為以下其中之一的值 inline-blocks，table-cells，table-captions。//就是不是塊級盒子的塊容器

4、overflow 除了 visible 以外的值（hidden，auto，scroll）

滿足了上面這四個條件之一，就能夠建立塊級格式化上下文，它裡面的內容所處的環境就是塊級格式化內容相關的環境。

在 CSS3 中，BFC 叫做 Flow Root，並增加了一些觸發條件：

1、display 的 table-caption 值

2、position 的 fixed 值，其實 fixed 是 absolute 的一個子類，因此在 CSS2.1 中使用這個值也會觸發 BFC ，只是在 CSS3 中更加明確了這一點。

元素設定 IE 特有的 CSS 屬性 zoom: 1 觸發 hasLayout ，zoom 用於設定或檢索元素的縮放比例，值為“1”即使用元素的實際尺寸，使用 zoom: 1 既可以觸發 hasLayout 又不會對元素造成其他影響，相對來說會更為方便。這是ie下的情況

塊級格式化上下文（BFC）的作用：

(1) BFC 會阻止外邊距摺疊

我理解摺疊的意思就是外邊距會重疊，並不會分的很清，就像你的就是我的，我的也是你的。

外邊距摺疊的規則：僅當兩個區塊層級元素相鄰並且在同一個塊級格式化上下文時，它們垂直方向之間的外邊距才會疊加。也就是說，即便兩個區塊層級元素相鄰，但當它們不在同一個塊級格式化上下文時它們的邊距也不會摺疊。因此，阻止外邊距摺疊只需產生新的 BFC 。

但是對於兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對於嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子項目的margin就不會和父元素的margin發生摺疊了。

(2) BFC 可以包含浮動的元素

這說明BFC中子項目不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界

(3) BFC 可以阻止元素被浮動元素覆蓋

這是根據每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。這個原理實現的。