1. IFC與line box
IFC的英文全稱是：Inline Formatting Contexts，直譯為“行內(nèi)格式化上下文”珠洗。
IFC由一個不包含塊級盒的塊容器盒生成。
在行內(nèi)格式化上下文中舍咖，盒從包含塊的頂部開始一個接一個地水平擺放达箍。盒水平方向的外邊距、邊框和內(nèi)邊距在布局時都會考慮在內(nèi)奢赂。盒的垂直對齊方式則不一：可能按底部或者頂部對齊陪白，又或者按它們內(nèi)容文本的基線對齊。包含了形成一行的那些盒的矩形區(qū)域被稱為行盒 Line Box 膳灶。
2. 行盒的高度
用戶代理將行內(nèi)級盒流入到一個行盒組成的垂直棧中咱士。行盒的高度計算規(guī)則如下：
計算行盒內(nèi)每個行內(nèi)級盒的高度立由。對于替換元素replaced elements、行內(nèi)塊元素nline-block elements以及行內(nèi)表格元素inline-table elements序厉，高度是其margin box的高度锐膜；對于行內(nèi)盒，高度是其 line-height弛房。(參考 "Calculating heights and margins" 和 在 "Leading and half-leading"里的height of inline boxes)
行內(nèi)級盒根據(jù)其 vertical-align 屬性垂直對齊道盏。如果它們對齊 top 或 bottom，它們必須對齊文捶，以便使行盒高度最小化荷逞。如果這些盒足夠高，則有多種解決方案并且CSS2.2沒有規(guī)定此行盒的基線的位置（即粹排，strut的位置种远，參見下文）。
行盒高度是最上盒頂部到最下盒底部的距離恨搓。（包括struct院促，解釋參見下述 line-height。）
空的行內(nèi)元素生成空的行內(nèi)盒斧抱，但這些盒仍然有margins, padding, borders 和一個行高line height常拓，因此跟有內(nèi)容的元素一樣會影響計算。
2.1 行距Leading和半行距half-leading
CSS假定每種字體都有字體指標辉浦，用于指定基線以上的特征高度和指定其下的深度弄抬。在本節(jié)中，我們使用A來表示高度（給定尺寸的給定字體）和D深度宪郊。我們還定義AD = A + D掂恕，即從頂部到底部的距離。（有關如何為TrueType和OpenType字體查找 A和D的說明弛槐，請參閱下面的注釋）請注意懊亡，這些是整個字體的度量標準，不需要與任何單個字形的上行和下行對應乎串。
用戶代理必須通過其相關基線將非替換的行內(nèi)框中的字形彼此對齊店枣。然后，對于每個字形叹誉，確定A和D鸯两。需要注意的是在單個元素內(nèi)的字形可能來自不同的字體，因此不需要都具有相同的A和D长豁。如果行內(nèi)盒完全不包含字形钧唐，則認為它包含了一個帶有元素的首個可用字體的A和D的支柱（一個零寬度的不可見字形） 。
接著對每個字符添加行距L匠襟，其中 L = line-height - AD钝侠。行距的一般添加到A之上该园，另一半添加到D之下，從而賦予字符以及其行距一個基線之上的完整高度 A' = A + L/2机错，以及完整深度 D' = D+ L/2爬范。
注：L可能為負。
包含了所有字符以及字符兩側半行距的行內(nèi)盒的高度正是 line-height弱匪。子元素的盒不影響這個高度。
盡管非替換元素的margins, borders和padding不納入行盒的計算璧亮，它們?nèi)匀讳秩驹谛袃?nèi)盒的周圍萧诫。這意味著如果 line-height 指定的高度小于被包含盒的content height，padding和borders的backgrounds和colors可能會滲透到相鄰的行盒枝嘶。用戶代理應當按文檔順序渲染這些盒帘饶。這會造成后面的盒的borders會在前面盒的邊框和文本上繪制。
注：CSS2.1沒有定義什么是行內(nèi)盒的內(nèi)容區(qū)域（參見文檔-10.6.1 ）群扶，因此不同的用戶代理可能把backgrounds和borders繪制在不同地方及刻。
注：推薦OpenType和TrueType字體（在轉換到當前元素的字號后）的A和D使用該字體OS/2表格中的“sTypeAscender”和“sTypeDescender”特性。如果沒有這些特性竞阐，則使用HHEA表中的“Ascent”和“Descent”特性缴饭。
2.2 行高屬性line-height
在內(nèi)容由行內(nèi)級元素組成的塊容器元素上，line-height 指定該元素內(nèi)行盒的最小高度minimal height骆莹。最小高度由基線上方的最小高度和下方的最小深度組成颗搂，就如同每個行盒以一個具有該元素字體和行高屬性的零寬度行內(nèi)盒開始一樣。我們稱此虛構盒為“支柱 Strut ”幕垦。（該命名靈感源于Tex丢氢。）
字體在基線之上的高度和和基線之下的深度被假定為包含在字體內(nèi)的特性。（更多細節(jié)先改，參見CSS3疚察。）
在一個非替換行內(nèi)元素上，line-height 指定一個高度用于計算行盒的高度仇奶。
line-height屬性的值具有如下意義：
normal:
讓用戶代理設使用值為一個基于元素字體的“合理”值貌嫡。該值與< number >意義相同。我們推薦 normal 的使用值在1.0到1.2之間猜嘱。計算值為 normal衅枫。< length >
指定長度用于計算行盒高度。負值非法朗伶。< number >
屬性的使用值為此數(shù)值乘以元素的字號弦撩。負值非法。計算值與指定值相同论皆。< percentage >
屬性的計算值為此百分比乘以元素的字號計算值益楼。負值非法猾漫。
下面例子中的三條規(guī)則的行高結果相同：
div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */
當元素包含以多種字體渲染的文本時，用戶代理會根據(jù)最大字號來決定 normal 的 line-height 值感凤。
注：如一個塊容器盒中的所有行內(nèi)盒僅有一個 line-height 值并且所有行內(nèi)盒字體相同（并且行內(nèi)盒中不存在替換元素悯周、行內(nèi)塊元素等），上述將確保相鄰行的基線正好相隔 line-height陪竿。這在不同字體的文本列必須對齊時非常重要禽翼，比如在table中。
2.3 垂直對齊屬性vertical-align
此屬性影響行內(nèi)級元素生成的盒子在行盒內(nèi)的垂直定位族跛。
注：該屬性值在表格上下文中有不同含義闰挡。請查閱table height algorithms一節(jié)了解詳情。
下述值僅相對于 父行內(nèi)元素(parent inline element) 或 父塊容器元素的struct (the struct of a parent block container element)有意義礁哄。
在下述定義中长酗，對行內(nèi)非替換元素而言，用于對齊的盒是高度為 line-height 的盒（包括了盒的字形glyphs以及兩側的半行距half-leading桐绒，參見上面）夺脾。對于其他所有元素，用于對齊的盒是margin box茉继。
baseline
將盒的基線與父盒的基線對齊咧叭。如果盒沒有基線，將其bottom margin edge與父盒的 baseline 對齊馒疹。middle
把盒的垂直中點同父盒的基線加上父盒一半的 x-height 對齊佳簸。sub
把盒的基線降到父盒的下標的適當位置。（此值對元素文本的字號無影響颖变。）super
把盒的基線升到父盒的上標的適當位置生均。（此值對元素文本的字號無影響。）text-top
把盒的頂部同父級的內(nèi)容區(qū)域的頂部對齊（參見 10.6.1）腥刹。text-bottom
把盒的底部同父級的內(nèi)容區(qū)域的底部對齊（參見 10.6.1）马胧。
< percentage >
把盒提升（正值）或降低（負值）指定距離（line-height 值的百分比）。值0% 意味著與 baseline 相同衔峰。< length >
把盒提升（正值）或降低（負值）指定距離佩脊。值0cm 意味著與 baseline 相同。
下面的值使元素相對于行盒對齊垫卤。由于元素可能有子元素相對于該元素對齊（子元素又可能擁有后代相對于子元素對齊）威彰，因此下面的值使用對齊子樹 aligned subtree 的邊界。一個行內(nèi)元素的對齊子樹包括該元素以及 vertical-align 值不為 top 或 bottom 的所有子行內(nèi)元素的所有對齊子樹穴肘。該對齊子樹的top是子樹內(nèi)最高的盒頂部歇盼，bottom也是類似這樣。
top
把對齊子樹的頂部與行盒頂部對齊评抚。bottom
把對齊子樹的底部與行盒底部對齊豹缀。
行內(nèi)表格inline-table的基線是表格首行的基線伯复。
行內(nèi)塊的基線是其標準流內(nèi)最后一個行盒的基線，除非該行內(nèi)塊沒有 處于標準流內(nèi)的行盒或者其 overflow 屬性計算值不為 visible邢笙，這種情況下基線為bottom margin edge緣啸如。
綜合以上，行盒的高度總是足以容納其包含的所有盒氮惯。然而叮雳，它可能高于其所包含的最高盒（例如，如果盒子是對齊的妇汗，以便基線對齊）债鸡。當一個盒子B的高度小于包含它的行盒的高度時， 行盒內(nèi) B 的垂直對齊方式由 vertical-align 屬性決定铛纬。當在水平方向上幾個行內(nèi)級盒不能完全被單個行盒包含時，它們會被分配到兩個或者多個垂直堆疊的行盒中唬滑。因此告唆，一個段落就是多個行盒的垂直堆疊。行盒的堆疊沒有垂直間距（除非有特別聲明）并且從不重疊晶密。
3. 行盒的寬度
一般來說擒悬，行盒的左邊緣緊貼其包含塊的左邊緣，其右邊緣緊貼包含塊的右邊緣稻艰。然而懂牧，浮動盒可能被置于包含塊和行盒邊緣之間。因此尊勿，盡管在同一行內(nèi)格式化上下文中的行盒是等寬的（包含塊的寬度）僧凤，由于浮動會造成可用的水平空間減少，行盒的寬度仍可能變動元扔。同一行內(nèi)格式化上下文中的行盒在高度上通常是變動的（比如躯保，一行可能包含圖片但其他行僅包含文本）。
當一行中的行內(nèi)級盒的總寬度小于包含它們的包含塊的時候澎语，它們在行里的水平分布取決于 text-align 屬性途事。如果取 justify 值，用戶代理可能拉伸行內(nèi)盒（ inline-table 和 inline-block 盒除外）中的空格和字間距擅羞。
當行內(nèi)盒的寬度超過行盒寬度時尸变，行內(nèi)盒將被分為多個盒，被分解出的盒則又分布在多個行盒中减俏。如果一個行內(nèi)盒不可切割（比如召烂，行內(nèi)盒包含的是單個字符或者語言指定的斷字規(guī)則不允許斷字，又或者行內(nèi)盒的 white-space 屬性值為 nowrap 或 pre ）垄懂，那么該行內(nèi)盒將溢出行盒骑晶。
當行內(nèi)盒被分割痛垛，外邊距、邊框和內(nèi)邊距在任何斷點處都不會產(chǎn)生視覺影響桶蛔。
行內(nèi)盒也可能由于雙向文本處理而在一個行盒內(nèi)被切割成多個盒匙头。
為了包含行內(nèi)格式化上下文中的行內(nèi)級內(nèi)容，行盒按需創(chuàng)建仔雷。對于“不包含文本蹂析，沒有保留的空白區(qū)域，沒有margins碟婆、padding电抚、border不為零的行內(nèi)元素，也沒有其他在標準流內(nèi) In-flow 內(nèi)容（如圖片竖共、行內(nèi)塊或行內(nèi)表格）蝙叛，并且不以保留的換行符結尾”的行盒，如果是為決定它們所包含的元素的定位公给，則必須視其為零高度的行盒借帘，除此之外的其他目的下應視其為不存在。
下面是一個行內(nèi)盒構造的例子淌铐。以下段落（由HTML塊級元素 p 創(chuàng)建）包含了穿插有 em 和 strong 匿名文本肺然。
<p>Several <em>emphasized words</em> appear
<strong>in this</strong> sentence, dear.</p>
p 元素生成了一個包含五個行內(nèi)盒的塊盒，其中三個行內(nèi)盒是匿名的：
- 匿名："Several"
- em："emphasized words"
- 匿名："appear"
- strong："in this"
- 匿名："sentence, dear."
為了格式化該段落腿准，客戶端將五個行內(nèi)盒放進若干行盒l(wèi)ine boxes中际起。在這個例子中，由 p 元素生成的盒創(chuàng)建了這些行盒的包含塊吐葱。
如果該包含塊足夠寬街望，所有的行內(nèi)盒將放置在單個行盒中，如下：
如果寬度不夠唇撬，行內(nèi)盒就會被分割并分布在多個行盒中它匕。段落可能就變成了：
或者：
在最后這個情況里， em 盒被分割成了兩個 em 盒（現(xiàn)稱之為 split1 和 split2 ）窖认。Margins, borders, padding, 或者 text decorations在 split1 之后或者 split2 之前都沒有視覺效果豫柬。看如下示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Example of inline flow on several lines</title>
<style type="text/css">
EM {
padding: 2px;
margin: 1em;
border-width: medium;
border-style: dashed;
line-height: 2.4em;
}
</style>
</head>
<body>
<p>Several <em>emphasized words</em> appear here.</p>
</body>
</html>
根據(jù) p 的寬度扑浸，這些盒可能按如下情況分布：
可以看到：
- 外邊距插在了 emphasized 之前和 words 之后
- 內(nèi)邊距被插在了 emphasized 之前烧给、上、下喝噪， words 值后础嫡、上、下。虛線邊框渲染在了每個單詞的三邊榴鼎。
就好像這個盒子在單行排好以后被直接掰開成兩個一樣伯诬。
參考
https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro
https://www.w3.org/TR/CSS2/visuren.html
CSS規(guī)范 > 9 視覺格式化模型 Visual Formatting Model
CSS規(guī)范 > 10 視覺格式化模型詳述 Visual Formatting Model Details
css中的IFC
css中的bfc和ifc
[譯]:BFC與IFC
淺析css中的BFC、IFC巫财、GFC和FFC
css IFC 與 BFC分析
