css佈局中格式化上下文(FC)類型有哪些?格式化上下文(FC)的類型介紹

什麼是格式化上下文(FC)？格式化上下文(Formatting Context)，指頁面中一個渲染區域，擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關係和作用，那麼css佈局中格式化上下文有哪些呢？下面這篇文章為大家介紹了幾種格式化上下文的類型。

區塊級格式上下文（BFC）：

什麼是BFC？ Block Formatting Context，區塊級格式化上下文，一個獨立的區塊級渲染區域，該區域擁有一套渲染規則來約束區塊級盒子的佈局，且與區域外部無關。

BFC的約束規則

1、內部的BOX會在垂直方向上一個接一個的放置；

2.垂直方向上的距離由margin決定。 （完整的說法是：屬於同一個BFC的兩個相鄰的BOX的margin會發生重疊，與方向無關。）

3、每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此。 （這表示BFC中的子元素不會超出它的包含塊，而position為absolute的元素可以超出它的包含塊邊界）；

#4、BFC的區域不會與float的元素區域重疊;

#5、計算BFC的高度時，浮動子元素也參與計算；

#6、BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之亦然；

BFC的應用

• #防止margin發生重疊

• ##可防止發生因浮動導致的高度塌陷

  #怎麼產生BFC

• float的值不為none;

• #overflow

  的值不為visible;

  display
的值為

inline-block

#table-cell

table-caption;

position

的值為absolute或

fixed

;

display： table也認為可以產生BFC？其實是在於Table會預設產生一個匿名的table-cell，而正是這個匿名的table-cell產生了BFC。

行內格式化上下文（IFC）：

1. #什麼是IFC？ IFC(Inline Formatting Contexts)直譯為"行內格式化上下文"，IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來（不受到垂直方向的padding/margin 影響)IFC有的特性

1、IFC中的line box一般左右都貼緊整個IFC，但是會因為float元素而擾亂。 float元素會位於IFC與與line box之間，使得line box寬度縮短。

2. 2、IIFC中時不可能有區塊級元素的，當插入區塊級元素時（如p中插入div）會產生兩個匿名區塊與div分隔開，即產生兩個IFC，每個IFC對外表現為區塊級元素，與div垂直排列。 IFC的應用程式

水平居中：當一個區塊要在環境中水平居中時，設定其為inline-block 則會在外層產生IFC，透過

text-align

則可以使其水平居中。 垂直居中：建立一個IFC，用其中一個元素撐開父元素的高度，然後設定其vertical-align:middle ，其他行內元素則可在此父元素下垂直居中。 網格佈局格式化上下文（GFC）#GFC(GridLayout Formatting Contexts)直譯為"網格佈局格式化上下文"，當為一個元素設定

display

值為grid的時候，此元素將會獲得一個獨立的渲染區域，我們可以透過在網格容器（grid container）上定義網格定義行

（grid definition rows）

和網格定義列（grid definition columns）屬性各在網格項目（grid item）上定義網格行

（grid row）

和網格列

（grid columns）###為每一個網格項目## #（grid item）###定義位置和空間。 #########GFC###將改變傳統的佈局模式，他將讓佈局從一維佈局變成了二維佈局。簡單的說，有了###GFC###之後，佈局不再侷限於單一維度了。這時候你要實現類似九宮格，拼圖之類的佈局效果顯得格外的容易。 ############自適應格式化上下文（FFC）：#############FFC(Flex Formatting Contexts)直譯為"自適應格式化上下文"，display值為flex或inline-flex的元素將會產生自適應容器（flex container）。 ###

Flex Box 由伸縮容器和伸縮項目組成。透過設定元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設定為 flex 的容器被渲染為一個區塊級元素，而設定為 inline-flex 的容器則渲染為一個行內元素。

伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單來說，Flexbox 定義了伸縮容器內伸縮項目該如何佈局。

自適應格式化上下文（FFC）與區塊級格式上下文（BFC）的區別：

FFC與BFC有點類似，但仍有以下幾點區別：

1、Flexbox 不支援::first-line 和::first-letter 這兩種偽元素

2、vertical-align 對Flexbox 中的子元素是沒有效果的

# 3、float 和clear 屬性對Flexbox 中的子元素是沒有效果的，也不會使子元素脫離文檔流(但是對Flexbox 是有效果的！)

4、多欄佈局（column- *） 在Flexbox 中也是失效的，就是說我們不能使用多欄佈局在Flexbox 排列其下的子元素

5、Flexbox 下的子元素不會繼承父級容器的寬

#相關文章推薦：

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

CSS >行內格式化上下文中的各種高度計算_html/css_WEB-ITnose

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

以上是css佈局中格式化上下文(FC)類型有哪些?格式化上下文(FC)的類型介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！