BFC和IFC的相關內容

BFC 塊級格式化上下文

    BFC佈局規則：
    一、內部的Box會在垂直方向，一個接一個地放置；
    二、Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊；
    三、每一個元素的margin box的左邊，與包含塊border box的左邊相接觸；
    四、BFC的區域不會與float box重疊；
    五、BFC就是頁面上的一個隔離的獨立容器，容器裏的子元素不會影響到外面的元素。反之亦如此。
    六、計算BFC的高度時，浮動元素也參與計算。

----------

    一、獨立渲染區域；
    二、與這個區域外部絕不相關；
    三、須要觸發（須要寫一行聲明，來告訴外界聲明獨立）
      建議使用overflow：hidden來聲明
      在包住的div裏觸發，要觸發哪個就在哪個地方寫上overfolw:hidden


哪些元素會生產BFC？
    一、根元素
    二、float屬性不爲none
    三、position爲absolute或fixed
    四、disply爲inline-block，table-cell,table-caption,flex,inline-flex
    五、overflow不爲visible

IFC 行內格式化上下文

    解決垂直居中Vitical-align:middle，要配合line-height：數據，使用

    Box一個接一個的水平排列，起點是包含塊的頂部。水平方向上的margin、border和Padding在框之間獲得保留。

    框在垂直方向上能夠以不一樣的方式對齊：它們的頂部或底部對齊，或根據其中的文字的基線對齊。包含那些框的長方形區域，會造成一行，叫作行框。

    一個行框的寬度由包含它的元素的寬度和包含它的元素裏面有沒有float元素來決定，高度的肯定由行高度計算規則決定。

    行高的高度足以包含它的內部容器，也可能比它包含的容器們都高（好比在基線對齊的時候），當它包含的內部容器的高度小於行框的高度時，內部容器的垂直位置由vertical屬性來肯定，這個性質能夠用來實現垂直居中。
    
    當幾個行內框在水平方向沒法放入一個行內框時，它們能夠分配在兩個或多個垂直堆疊的行框中。所以，一個段落就是行框在垂直方向上的堆疊。行框在堆疊時沒有垂直方向上的分割且永不重疊。

    一個行內框超出包含它的行框的寬度，它將會被分割爲幾個框。若是一個行框不能被分割，行內框會益處行框。

    若是一個行內框被分割，margin、padding、border在全部分割處沒有視覺效果。

    建立一個IFC的環境，讓行框的高度是包含塊的高度的100%,讓行框內部的元素使用Vertical-align：middle,就能夠實現垂直居中。