?　　為了弄明白BFC、IFC以及定位、流的問題，翻譯部分Visual Formatting Model章節要點，如下：

注：當且屬首次翻譯，特別粗糙，并無與實戰結合，請勿相信，僅供參考

翻譯約定：

中文名	英文名	示例描述
瀏覽器	User agents	?
框	box?	?
元素	element	?
塊級元素	block-level element	?
定位機制	positioning scheme	?
內容塊	containing block	?
框的渲染/生成	box generation	?
塊級框	block-level box	如：display屬性為“block”、“list-item”、“table”的元素，table框、可替換元素
塊級容器框	block container box	如：不可替換的inline-block、不可替換的table cell
塊框	block box	即屬于塊級框、又屬于塊級容器框
行內級框	inline-level box	如：display屬性值為"inline"、“inline-table”，“inline-block"的元素
行內框	inline box	如：大部分行內級框屬于行內框，但是以下不屬于行內框：可替換的行內級元素、inline-block元素、inline-table元素
原子性行內級框 ? ? ? ? ?	atomic inline-level block ? ? ? ??	如：可替換的行內級元素(如：input)、inline-block元素、inline-table元素
可替換元素	Replaced element	如：<img>, <object>, <video>; <textarea>, <input>;?匿名可替換元素
不可替換元素	Non-replaced element	?
流外	Out of flow	如：根元素、浮動元素、絕對定位元素
流內	In flow	?

?

?部分關系圖:

?

塊級框、塊級容器框、塊框

行內級框、參與IFC的框、行內框

?

解釋：

1. 可替換元素

　　可替換元素是一種其展現不在CSS限制范圍的元素，也就是說：它的展現獨立于CSS。典型的可替換元素有：

　　1. <img>, <object>, <video>,?　　　　　　display屬性為：inline

　　2.?表單元素：<textarea>, <input>. 　　　　display屬性為：inline-block

　　3.?有些元素在特定情況下才屬于可替換元素，如：<audio>, <canvas>，　　display屬性為：inline

　　4.?使用CSS屬性content插入的內容稱為匿名可替換元素。

　　這類元素的典型特點是：沒有結束標簽，因此開始結束標簽之間也沒有內容，內容通過屬性（如：value）來指定；你也可以理解為：該標簽會被外面的資源所代替。

2. 不可替換元素：

　　除上面之外的所有HTML元素稱為不可替換元素。

?

翻譯正文：

9. 　　　　Visual Formatting Model 可視化排版模型（簡稱：VFM）
9.1 　　　?VFM介紹
　　本章和下一章描述了VFM：瀏覽器將DOM樹轉換為可視化的過程。
　　VMF中，DOM樹中的每個元素根據框模型生成0或多個框。這些框的布局是根據以下因素控制：
　　1. 框尺寸和類型（框生成方式）
　　2. 定位機制（常規流、浮動、絕對定位）
　　3. DOM樹中元素間的關系
　　4. 外部因素（例如：viewport尺寸、圖片的內在尺寸等）

　　（跳過Continuous media, paged media）
　　VFM并沒有規定排版的所有方面（如：letter-spacing算法），本規范也不會講到不同瀏覽器對排版處理的差異。
9.1.1　　viewport

　　（譯者注：跳過不譯）
9.1.2　　內容塊
　　CSS2.1中，許多框的position和size是根據其內容塊計算的。一般來說，一個DOM元素生成的框會被后代框當做內容塊，我們俗稱：一個框為后代節點“建立”了內容塊。短語："一個框的內容塊"指的是"包圍這個框的內容塊"，并不是這個框生成的內容塊。

　　每一個框都是根據它的內容塊來定位，但并不總是限制于內容塊中，因為它有可能會（溢出）overflow；
　　關于內容塊尺寸計算的詳細信息請參考下章。

9.2　　　框的渲染/生成
　　本小節討論了CSS2.1中生成的框的類型，類型的不同會影響框在VFM中的處理方式。以下的display屬性用于指定框的類型。

9.2.1　　塊級元素、塊級框
　　DOM源碼中，按照塊排版的元素稱為塊級元素（Block-level element）(如：paragraph對應的p標簽)，當元素的display屬性為“block”、“list-item”、“table”時，該元素成為塊級元素；

　　每一個塊級元素都會生成一個"主塊級框"（Principal block-level box）用于包含后代框和生成的內容，這個框會參與到定位機制和BFC中。部分塊級元素（如：“list-item”）會生成除了主塊框之外的額外框，這些額外框根據主塊級框的位置放置。

　　除了后面章節單獨介紹的table框、可替換元素，一個塊級框也是一個塊級容器框。一個塊級容器框要么只能包含塊級框、或者行內框（建立一個IFC）。并非所有的塊級容器框都屬于塊級框：不可替換的inline-block、不可替換的table cell屬于塊級容器框，但不屬于塊級框。

　　同時屬于塊級框和塊級容器框的框稱為塊框。

　　塊級框、塊級容器框、塊框有時一概簡稱為"塊"。

9.2.1.1　　匿名塊框
　　如下的一段HTML代碼：

<DIV>Some text<P>More text </DIV>

　　假設div和p元素的display為block，那么div就擁有了行內元素和塊級元素，為了簡化定義排版模型，我們假設存在一個匿名塊圍繞著文本some text。

　　換言之，如果塊級容器框（如：div元素）包含塊級框（如：p元素），那么我們強制塊級容器框只包含塊級框，即：將some text設置為塊級框，只不過是匿名的。

　　當行內框的代碼中包含塊級框時，這個行內框（以及祖先行內框）會被分成多段圍繞在這個塊級框上下，因此行內框被打斷成兩段（即使其中一段是空文本），中間夾著塊級框。考慮到上面簡化的排版模型，這些前后的行內框被匿名塊框包圍，中間的那個塊級框成為匿名塊框的兄弟節點。當這樣的行內框遇到相對定位時，也會影響到其中的塊級框。

　　這種模型也會應用到如下規則（p元素為inline，span為block）的代碼中：

p { display: inline } span { display: block } <P>This is anonymous text before the SPAN. 　　<SPAN>This is the content of SPAN.</SPAN>This is anonymous text after the SPAN. </P>

　　p元素包含了匿名文本C1、塊級元素C2、匿名文本C3，最終生成的框為：body代表一個塊框，包含了一個行內框，這個行內框內部包含了：匿名塊框C1、span塊框、匿名塊框C2。

　　匿名框會從父框中繼承一些可被繼承的屬性（如：第一個例子中的div父框），不可繼承的屬性會有初始值。例如：匿名框的font會被繼承，但是外邊距是0。

　　設置在匿名框的父元素上的屬性也會應用到元素本身和內容上。例如：在p元素上設置border屬性，導致邊框會圍繞在C1（C1無右邊框）和C2（無左邊框）上。

　　針對行內容器框設置邊框，部分瀏覽器會有其它的處理方式。（譯者注：跳過不譯）

9.2.2　　行內元素、行內框
　　HTML代碼中，不會按照塊排版的元素稱為行內元素。它的內容處于一行中（如：p元素中的em元素，行內圖片等）。display屬性值為"inline"、“inline-table”，“inline-block"的元素稱為行內級框，這些框會參與到IFC（Inline Formatting Context）中。

　　當一個元素即屬于行內級，且內容又參與到IFC中時，該元素稱為行內框。不可替換元素的display屬性為inline時稱為行內框。不屬于行內框的行內級框（例如：可替換行內級元素、inline-block元素、inline-table元素）稱為："原子性行內級框"，因為他們會作為一個整體參與到IFC中。

9.2.2.1 匿名行內框
　　塊容器元素內部的任何直接子文本都必須按照行內元素來處理（例外：內部含有塊框時，會當做匿名塊框處理）。

　　如下的一段代碼：

<p>Some <em>emphasized</em> text</p>

　　p元素生成一個塊框，em元素生成一個行內框，文本"Some"和"text"生成行內框。后者稱為匿名行內框，因為他們沒有相關聯的行內級元素將這些文本包圍起來。

　　匿名行內框會從父塊框中繼承部分屬性，不可繼承屬性使用初始值。（如：匿名框從p元素繼承了color，但background卻是透明的（譯者注：chrome下background也繼承了））

　　由于"white-space"屬性不會生成匿名塊，因此空白內容應該會被重疊起來。

　　如果清楚匿名框在BFC、IFC中所屬的類型，那么規范統稱這些匿名行內框、匿名塊框為匿名框。

　　更多的匿名框將在后面介紹table排版時介紹。

9.2.3 Run-in框
　　display為run-in將在CSS3中定義。

9.2.4 display屬性
　　初始值 inline

　　下列各值的解釋：
　　block
　　元素生成塊框
　　inline-block
　　元素生成一個行內級的塊容器框，對內是一個塊框，對外則是一個原子性的行內框。
　　list-item
　　元素生成多個行內框，如：ul元素生成一個塊框，里面的li元素的display屬性默認為：list-item。
　　none
　　元素不會出現在VFM中，不會生成框，也不會對外面的布局有影響。后代元素也不會生成框，為后代節點設置display屬性無法覆蓋這種方式。

　　table，... 元素生成類似于table的格式。

　　除了定位元素、浮動元素、根元素外，display屬性計算出來的值就是設定的值。關于這三類的情況，請參考這一節”display、position、float的關系“。

　　雖然display屬性的初始值為inline，但瀏覽器的默認樣式會覆蓋這一值。

9.3　　定位機制
　　CSS2.1中，一個框會根據三種定位機制來布局：
　　1. 常規流　　　塊級框的塊排版、行內級框的行內排版、塊級框與行內級框的相對定位
　　2. 浮動　　　　浮動模型中，框首先按照常規流布局，然后從常規流中去除，接著移動盡左或盡右的地方，它的內容會跟隨移動。
　　3. 絕對定位　　該模型中，框直接從常規流中移除，然后根據這個框的內容塊來計算位置

　　根元素、浮動元素、絕對定位元素處于流外，不處于流外的其余元素處于流內。元素A的流包含了元素A本身、和A里面的所有最近流外祖先元素為仍A的元素。

　　注意：根元素雖然處于流外，但是position屬性確屬于static

?

9.3.1　　position屬性
　　CSS2.1中, position和float屬性決定了采用哪種定位機制來計算框的位置。

　　可選值： static, relative, absolute, fixed, inherit
　　初始值： static

　　各值的解釋：
　　static
　　該元素的框按照常規流布局，top, right, bottom, left屬性無效
　　relative
　　框根據它在常規流中的正常位置進行偏移；該值對table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption元素無效。
　　absolute
　　框的位置根據框所在的內容塊進行定位
　　fixed
　　框根據當前瀏覽器的視口定位（viewport），它不會隨著頁面的滾動而移動

　　多數瀏覽器會為根元素的position屬性賦值static。

?

9.3.2　　框偏移：top, right, bottom, left
　　如果一個元素的position屬性不為static，則稱這個元素為定位元素。定位元素生成定位框，擁有以下四個屬性：
　　top
　　right
　　bottom
　　left
　　初始值 auto

　　賦值類型：
　　length
　　不允許負值
　　auto
　　對于不可替換元素，該值與所屬的屬性top，right, bottom, left有關。詳見絕對定位小節。
　　對于可替換元素，其效果取決于該元素本身的尺寸。詳見絕對定位小節。

9.4　　常規流
　　常規流中，塊級框參與BFC，行內級框參與IFC。

9.4.1　　BFC
　　塊框會參與到所屬內容塊為BFC的計算中，并非所有塊框都會為其子節點建立BFC。滿足下面任何一個條件即會建立BFC：
　　1. float元素不為none
　　2. 絕對定位元素（position不為static）
　　3. 不屬于塊框的塊容器框（如：inlien-block，table-cells, table-caption）
　　4. overflow屬性不為visible的塊框（除非...，譯者注：跳過不譯）

　　BFC中，框會按照垂直方向依次排列，相鄰的兩個塊級框的margin外邊距會發生重疊。
　　BFC中，每個框的左外邊緣貼在了內容塊的左邊，即使該框為float。

9.4.2　　IFC
　　IFC中，行內框水平排列，margin不會發生重疊，對應的這個內容塊成為行框。

　　行框的width是根據其內容塊決定的，高度根據line-height計算規則決定。

　　（譯者注：跳過不譯）

9.7　　display, position, float之間的關系：
　　影響框生成的三個屬性：display, position, float關系如下：
　　1. display為none，則position和float無效，不會生成框。
　　2. 否則如果position為absolute, fixed，則float計算為none；display按下表格轉換：inline變為block
　　3. 否則如果float不為none，display按下表格轉換
　　4. 否則如果元素是根節點，display按下表格轉換
　　5. 否則按照display設定的值展示

Specified valueComputed value

inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified

　　總結：display的值可能會變的情況是：position屬性為absolute, fixed; 或者float不為none；或者根節點。

?

?匯總：

　　從其他博客匯總來BFC的相關資料：

　　BFC的用處：

　　1.?自適應兩欄布局　　　　　　　　　　原因：BFC的區域不會與float box重疊

　　2.?清除內部浮動　　　　　　　　　　　原因：計算BFC的高度時，浮動元素也參與計算

　　3.?防止垂直 margin 重疊　　　　　　 ?原因：Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

　　

　　BFC的特點：

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

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

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

BFC的區域不會與float box重疊。

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

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

　　

　　如何新建BFC：

　　1. float不為none

　　2.?position為absolute或fixed

　　3.?display為inline-block, table-cell, table-caption, flex, inline-flex

　　4.?overflow不為visible

?

參考資料：

Replaced element

W3C?Visual formatting model

?前端精選文摘：BFC 神奇背后的原理

MDN Visual formatting model

?

轉載于:https://www.cnblogs.com/diydyq/p/4230308.html

總結

以上是生活随笔為你收集整理的CSS篇 第9章 Visual Formatting Model 部分翻译的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。