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’ 屬性垂直對齊。
行框的高是最頂端框的頂邊到最底端框的底邊的距離。