BFC和IFC的相关内容

Posted 2020-07-04

BFC 块级格式化上下文

    BFC布局规则：
    1、内部的Box会在垂直方向，一个接一个地放置；
    2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
    3、每个元素的margin box的左边，与包含块border box的左边相接触；
    4、BFC的区域不会与float box重叠；
    5、BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素。反之亦如此。
    6、计算BFC的高度时，浮动元素也参与计算。

----------

    1、独立渲染区域；
    2、与这个区域外部毫不相关；
    3、需要触发（需要写一行声明，来告诉外界声明独立）
      建议使用overflow：hidden来声明
      在包住的div里触发，要触发哪一个就在哪一个地方写上overfolw:hidden


哪些元素会生产BFC？
    1、根元素
    2、float属性不为none
    3、position为absolute或fixed
    4、disply为inline-block，table-cell,table-caption,flex,inline-flex
    5、overflow不为visible

IFC 行内格式化上下文

    解决垂直居中Vitical-align:middle，要配合line-height：数据，使用

    Box一个接一个的水平排列，起点是包含块的顶部。水平方向上的margin、border和Padding在框之间得到保留。

    框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中的文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。

    一个行框的宽度由包含它的元素的宽度和包含它的元素里面有没有float元素来决定，高度的确定由行高度计算规则决定。

    行高的高度足以包含它的内部容器，也可能比它包含的容器们都高（比如在基线对齐的时候），当它包含的内部容器的高度小于行框的高度时，内部容器的垂直位置由vertical属性来确定，这个性质可以用来实现垂直居中。
    
    当几个行内框在水平方向无法放入一个行内框时，它们可以分配在两个或多个垂直堆叠的行框中。因此，一个段落就是行框在垂直方向上的堆叠。行框在堆叠时没有垂直方向上的分割且永不重叠。

    一个行内框超出包含它的行框的宽度，它将会被分割为几个框。如果一个行框不能被分割，行内框会益处行框。

    如果一个行内框被分割，margin、padding、border在所有分割处没有视觉效果。

    创建一个IFC的环境，让行框的高度是包含块的高度的100%,让行框内部的元素使用Vertical-align：middle,就可以实现垂直居中。