BFC和IFC

作者: nick121212 | 来源:发表于2018-12-11 10:42 被阅读4次

    BFC IFC

    BFC

    Block Formatting Context 块级格式化上下文。

    bfc是什么

    由css2提出,具有规定的渲染,定位等规则的块级元素;大家都知道盒子box,一个布局中,可以同时存在很多的盒子boxes,而盒子只是容器而已,这也是其不同之处,可以说成是其升级版,具有一些规则和渲染方式之后就可以变成一个BFC,当然也只有块级元素能参与转化成BFC。

    BFC布局规则

    1. 内部的Box会在垂直方向,一个接一个的放置
    2. 同一个BFC内,垂直方向的盒子上下margin会重叠
    3. 每个元素的margin box的左边,与包含块border box的左边连接(对于从右往左的布局,则相反)即使存在浮动也是如此
    4. 子BFC的区域不会与float box重叠
    5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此。
    6. 计算BFC的高度时,浮动元素也参与计算(故也可以达到所谓清除浮动的效果,只要将包裹层转变为BFC)

    如何将块级元素转换成BFC

    1. 具有除了float:none的其他浮动属性
    2. 定位为absolute或者fixed
    3. dispaly为block、inline-block、table-cell、table-caption、flex、inline-flex
    4. overflow不为visible(除非该值已经传播到视口,入html body会将overflow的值传播到视口,故此情况下,该属性不能建立BFC)

    IFC

    Inline Formatting Context 内敛格式化上下文。

    ifc是什么

    IFC的line box(线框高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)

    IFC的inline box一般左右都贴紧整个IFC,但是因为float元素二扰乱。float元素会位于IFC与line box之间,使得line box宽度缩短。同个IFC下的多个line box高度会不同。IFC中不可能有块级元素,当插入块级元素时(如p中插入div)会产生两个匿名快与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。

    作用

    水平居中:当一个块要在环境中水平居中时候,设置其为inline-block则会在外层产生IFC,通过text-align:center则可以使其水平居中。

    垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

    相关文章

      网友评论

          本文标题:BFC和IFC

          本文链接:https://www.haomeiwen.com/subject/isrshqtx.html