css中的BFC和IFC

BFC

定義：塊級格式化上下文，他是一個獨立的渲染區域，他規定了這個內部如何佈局，而且與這個區域的外部絕不相干。
BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊，經常使用來清除浮動和佈局。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

生成bfc的元素有哪些：
float的屬性不爲none
position爲absolute和fixed
overflow不爲none
display爲inline-block，table-cell，flex，inline-flex

IFC
定義：行內格式化上下文
IFC佈局規則：

框會從包含塊的頂部開始，一個接一個地水平擺放。
擺放這些框的時候，它們在水平方向上的外邊距、邊框、內邊距所佔用的空間都會被考慮在內。在垂直方向上，這些框可能會以不一樣形式來對齊：它們可能會把底部或頂部對齊，也可能把其內部的文本基線對齊。能把在一行上的框都徹底包含進去的一個矩形區域，被稱爲該行的行框。水平的margin、padding、border有效，垂直無效。不能指定寬高。
行框的寬度是由包含塊和存在的浮動來決定。行框的高度由行高計算這一章所描述的規則來決定。
行框必定會高到足以容納它所包含的所有框。然而，它也可能比它所包含的最高的框還要高（例如：這些框是以基線對齊）。當框 B 的高度小於包含它的行框時，則 B 在行框中垂直對齊的位置由’vertical-align’ 屬性來決定。當幾個行級框在水平方向上沒法塞得進同一個行框時，它們會被分佈在兩個或多個垂直堆放的行框中。行框會以既沒有垂直間距 也沒有重疊的方式被垂直堆放起來。

一般，行框的左邊緊貼其包含塊的左邊，而行框的右邊緊貼其包含塊的右邊。然而，浮動框能夠插在包含塊邊緣與行框邊緣之間。所以，儘管在同一個IFC中的行框一般有一樣的寬度（也就是其包含塊的寬度），但它們的寬度也可能受浮動讓水平可用空間減小的影響而有所改變。在同一個IFC中，行框的高度一般是變化的（例如：某一行包含了一個比較高的圖片，而其它行只包含文本）。

當一行上的行級框的總寬度小於包含它們的行框的寬度，則它們在行框內的水平分佈由’text-align’屬性來決定。

當一個行內框的寬度超過了行框的寬度，則它會被分割成幾個框，而這些框會分佈在幾個行框。若是此行內框不可分割（例如：單個字符、或語言指定的文字打斷規則不容許在此行內框中出現打斷、或該行內框受 white-space 屬性爲 nowrap或 pre 的影響），那麼該行內框溢出該行框。

行內框被分割的時候，外邊距、邊框和內邊距在出現分割的地方都沒有視覺效果。
**行高計算 ― ‘line-height’ 與 ‘vertical-align’ 屬性**
計算行框裏的各行內級框的高度。對於置換元素、行內塊元素、行內表格元素來講，這是邊界框的高度，對於行內框來講，這是其 ‘line-height’。
行內級元素根據其 ‘vertical-align’ 屬性垂直對齊。
行框的高是最頂端框的頂邊到最底端框的底邊的距離。