【CSS】淺談css中格式化上下文BFC、IFC（二）
阿新 • • 發佈：2019-01-22
Inline Formatting Context
Inline Formatting Context的縮寫就是IFC。中文名叫，行內格式化上下文。行內框參與IFC。
什麼是行框？
在IFC中，每個框都是一個接一個地水平排列，起點是包含塊的頂部，水平方向上的margin、border、和padding在框之間得到保留。框在垂直方向上以不同的方式對齊，通過vertical設定。框的每一行稱為行框。
行框的寬度由它的包含塊和其中的浮動元素決定，高度由line-height決定。
2.行內框
如果幾個行內框（寬度超出行框）在水平方向無法放入到一個行框中，那麼它們將可能被分割成多個行框，來包含這些行內框，每一行就是一個行框。另外也有可能由於雙向文字的處理而將一個行框分割成多個行框。 如果一個行框不能被分割（比如行內框只包含單個字元，或被設定成不允許換行等），那麼行內框將會溢位。 在分割處不會運用margin、padding、border等屬性。
來看一段程式碼：
<style>
div{
width: 150px;
}
span{
border: 1px solid red;
}
</style>
<body>
<div><span>放不下就給我挪到下一行！！！！！！！！！！！！聽見沒有！！！！！！啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span></div>
</body 
如上圖所示，分割處的行框沒有應用邊框樣式。另外，因為！！！！是在一起的，是預設不換行的（英文字母同），所以內容被溢位了。
當行內框的高度小於包含它的行框時，行內框可以通過vertical-align來設定行內框在行框中垂直方向的對齊方式。預設為基線對齊。
舉例：
<style>
span:nth-of-type(1){
font-size: 50px;
border: 1px solid red;
}
span:nth-of-type(2){
font-size 兩個span在同一個行框中，但是第一個span將行框撐大了，所以第二個span就有一部分是空白的，就可以設定vertical-align。雖然第一個也可以設定，但是沒有意義。
3.行高（line-height）的計算
在IFC中，客戶端會將行內框排列為垂直方向的行框的堆疊。
行高由一下幾個特點決定：
- 計算框內每個行內框的高度
- 行內框按照vertical-align的屬性在垂直方向對齊
- 行高是最上方框的頂邊到最下面框的底邊的距離
自己感覺這篇文章寫的不好。如果有什麼不懂的可以討論。若有紕漏，還請不吝指出。
摯謝閱讀。