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,就能够实现垂直居中。