bfc樣式控制

black fromatting context塊級格式化上下文
bfc中的佈局規則
    1、在bfc環境中所有的元素在垂直方向一個接一個的排列
    2、在相鄰的盒子（box）在垂直的方向上margin值會重疊
    3、內部盒子會以bfc的左邊（右邊）線接觸，浮動也是一樣
    4、bfc區域不會與浮動盒子重疊
    5、bfc環境中的子元素與外界分離，不會影響到外面的元素，
       而外面的元素也不會影響的bfc裏面的元素
    6、bfc中浮動元素會參與計算
bfc的觸發方式
    1、float值不爲none（position、abuslute、foexd）
    2、display：inline-block   table-cell  table-caption
       flex   inline-flex
    3、overflow：不爲visible
ifc：inline fermatting context(行級格式上下文環境)
    1、ifc中的元素會在一行中從左到右排列  
    2、在一行上的所有元素會形成一個行框
    3、在行框的寬度爲包含框的寬度，高度爲行框中最高元素的高度
    4、浮動的元素不會在行框中，並且浮動元素會壓縮行框的寬度
    5、行框的寬度容納不下子元素時，子元素會換行的下一行顯示，並且
       會產生新的行框
    6、行框的元素內遵循text-align和vertical-align