CSS之IFC

IFC

Inline Formatting Contexts，也就是「內聯格式化上下文」。

符合如下任一條件即會生成一個IFC

• 塊級元素中僅包含內聯級別元素

造成條件很是簡單，須要注意的是當IFC中有塊級元素插入時，會產生兩個匿名塊將父元素分割開來，產生兩個IFC，這裏不作過多介紹。

IFC佈局規則

• 子元素水平方向橫向排列，而且垂直方向起點爲元素頂部。
• 子元素只會計算橫向樣式空間，【padding、border、margin】，垂直方向樣式空間不會被計算，【padding、border、margin】。
• 在垂直方向上，子元素會以不一樣形式來對齊（vertical-align）
• 能把在一行上的框都徹底包含進去的一個矩形區域，被稱爲該行的行框（line box）。行框的寬度是由包含塊（containing box）和與其中的浮動來決定。
• IFC中的「line box」通常左右邊貼緊其包含塊，但float元素會優先排列。
• IFC中的「line box」高度由 CSS 行高計算規則來肯定，同個IFC下的多個line box高度可能會不一樣。
• 當 inline-level boxes的總寬度少於包含它們的line box時，其水平渲染規則由 text-align 屬性值來決定。
• 當一個「inline box」超過父元素的寬度時，它會被分割成多個boxes，這些 oxes 分佈在多個「line box」中。若是子元素未設置強制換行的狀況下，「inline box」將不可被分割，將會溢出父元素。

相比較於BFC，IFC的規則噼裏啪啦一大堆，不多有人會耐心看下去，舉幾個例子，花幾分鐘就能夠大概明白其特性。

不少時候，上下間距不生效可使用IFC來解釋

.warp { border: 1px solid red; display: inline-block; }
.text { margin: 20px; background: green; }

<div class="warp">
    <span class="text">文本一</span>
    <span class="text">文本二</span>
</div>

左右margin撐開，上下margin並未撐開，符合IFC規範，只計算橫向樣式控件，不計算縱向樣式空間。

多個元素水平居中

.warp { border: 1px solid red; width: 200px; text-align: center; }
.text { background: green; }

<div class="warp">
    <span class="text">文本一</span>
    <span class="text">文本二</span>
</div>

水平排列規則根據IFC容器的text-align值來排列，能夠用來實現多個子元素的水平居中。

float元素優先排列

.warp { border: 1px solid red; width: 200px; }
.text { background: green; }
.f-l { float: left; }

<div class="warp">
    <span class="text">這是文本1</span>
    <span class="text">這是文本2</span>
    <span class="text f-l">這是文本3</span>
    <span class="text">這是文本4</span>
</div>

IFC中具有float屬性值的元素優先排列，在不少場景中用來在文章段落開頭添加「tag」能夠用到。

最後總結

利用IFC還能夠作不少其餘的事情，例如：解決元素垂直居中、多個文本元素行高不一致排列混亂。