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