### IFC（Inline Formatting Context） IFC即行內框產生的格式上下文 **IFC規則** ``` 在行內格式化上下文中 框一個接一個地水平排列，起點是包含塊的頂部。 水平方向上的 margin，border 和 padding 在框之間得到保留 框在垂直方向上可以以不同的方式對齊：它們的頂部或底部對齊，或根據其中文字的基線對齊 ``` **行框** **包含那些框的長方形區域，會形成一行，叫做行框** 行框的寬度由它的包含塊和其中的浮動元素決定，高度的確定由行高度計算規則決定 行框的規則： ``` 如果幾個行內框在水平方向無法放入一個行框內，它們可以分配在兩個或多個垂直堆疊的行框中（即行內框的分割） 行框在堆疊時沒有垂直方向上的分割且永不重疊 行框的高度總是足夠容納所包含的所有框。不過，它可能高于它包含的最高的框（例如，框對齊會引起基線對齊） 行框的左邊接觸到其包含塊的左邊，右邊接觸到其包含塊的右邊。 ``` **結合補充下IFC規則：** ``` 浮動元素可能會處于包含塊邊緣和行框邊緣之間 盡管在相同的行內格式化上下文中的行框通常擁有相同的寬度（包含塊的寬度），它們可能會因浮動元素縮短了可用寬度，而在寬度上發生變化 同一行內格式化上下文中的行框通常高度不一樣（如，一行包含了一個高的圖形，而其它行只包含文本） 當一行中行內框寬度的總和小于包含它們的行框的寬，它們在水平方向上的對齊，取決于 `text-align` 特性 空的行內框應該被忽略 即不包含文本，保留空白符，margin/padding/border非0的行內元素， 以及其他常規流中的內容(比如，圖片，inline blocks 和 inline tables)， 并且不是以換行結束的行框， 必須被當作零高度行框對待 ``` 總結： - 行內元素總是會應用IFC渲染規則 - 行內元素會應用IFC規則渲染，譬如`text-align`可以用來居中等 - 塊框內部，對于文本這類的匿名元素，會產生匿名行框包圍，而行框內部就應用IFC渲染規則 - 行內框內部，對于那些行內元素，一樣應用IFC渲染規則 - 另外，`inline-block`，會在元素外層產生IFC（所以這個元素是可以通過`text-align`水平居中的），當然，它內部則按照BFC規則渲染 相比BFC規則來說，IFC可能更加抽象（因為沒有那么條理清晰的規則和觸發條件） 但總的來說，它就是行內元素自身如何顯示以及在框內如何擺放的渲染規則，這樣描述應該更容易理解