如何建立區塊級格式化上下文？區塊層級格式化上下文的作用

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的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。這個原理實現的。

相關文章推薦：

CSS > 譯文：理解CSS中的區塊級格式化上下文_html/css_WEB-ITnose

#CSS理解區塊級格式上下文BFC

區塊層級格式化上下文(block formatting context)、浮動和絕對定位的工作原理詳解_html/css_WEB- ITnose

#

以上是如何建立區塊級格式化上下文？區塊層級格式化上下文的作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！