BFC和IFC的相关内容

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BFC和IFC的相关内容相关的知识,希望对你有一定的参考价值。

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

以上是关于BFC和IFC的相关内容的主要内容,如果未能解决你的问题,请参考以下文章

BFC布局与IFC布局以及普通文档流布局

IFC and BFC

BFC IFC 总结记录

BFC布局

前端的BFCIFCGFC和FFC

EFC