面试取经：BFC & IFC & GFC & FFC

前端小白1995
174 阅读3分钟

css中只有BFC 和 IFC，css3新增GFC和FFC

什么是FC

formatting contexts：格式化上下文，是页面中的一块渲染区域，并且有一套渲染规则，它决定了子元素如何定位，以及与其他元素的关系及相互作用。

存在四种类型的FC:

  • BFC
  • IFC
  • GFC
  • FFC

BFC

Block Formatting contexts：块级格式化上下文，页面上一块隔离的渲染区域，区域内的元素不会影响到区域外的元素

BFC的形成条件

  • body根元素
  • 浮动元素：float非none
  • 定位元素：position(absolute,fixed);
  • display(inline-block,table-cells,flex)
  • overflow非visible

BFC的特性

  1. 内部的box会在垂直方向上，一个接一个的放置。
  2. box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠(margin塌陷)。
  3. 每个元素的marginbox的左边，与包含块borderbox的左边相接触(对于从左到右的格式化，否则相反)。即使存在浮动也如此。
  4. bfc的区域不会与float元素重叠。所以可以制造bfc区域，使其与浮动元素贴边，而此时也会撑起父元素的高度。
  5. bfc就是页面上一个隔离的独立的容器，容器内的子元素不会影响到外面的元素，反之亦然。
  6. 计算bfc的高度时，浮动元素也参与计算。可以理解为，让父元素形成一个bfc区域时，里面的浮动元素会撑起父元素的高度。

BFC的应用

1.同一个bfc下外边距会发生折叠

<style>
    div{
        width:50px;
        height:50px;
        background:red;
        margin:50px;
    }
</style>
<body>
    <div></div>
    <div></div>
</body>

由于margin重叠，并非100px，而是50px(margin的取值：取大值)，可以制造bfc区域，消除重叠。

2.清除浮动

<style>
    #box{
        width:50px;
        height:50px;
        background:red;
        float:left;
    }
</style>
<body>
    <div id='father'>
    	<div id='box'></div> 
    </div>
</body>

#box脱离文档流，#father失去高度。

#father{
	overflow:hidden
}

3.可以阻止元素被浮动元素覆盖

<style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color:blue;
        }
    </style>
<body>
    <div id="div1">
        我设置了左浮
    </div>
    <div id="div2">
        我没有设置浮动
    </div>
</body>

可以看到div1压盖在div2上方

给div2制造bfc,清除覆盖

#div2{
	overflow:hidden;
}

IFC

Inline Formatting contexts：内联格式化上下文。IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受竖直方向的padding/margin的影响）IFC中的line box一般左右都紧贴整个IFC，但是会因float元素而扰乱。float元素会位于IFC与line box之间，使得line box 宽度缩短，同个IFC下的多个line box高度会不同。

IFC中不能存在块级元素，当插入块级元素时，会自动形成两个IFC，每个IFC对外表现为块级元素，与div垂直排列

<p><div></div></p>

应用

水平居中

当一个块要在环境中水平居中时，设置其为inline-block，则会形成IFC，通过text-align可实现水平居中

垂直居中

创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align：middle，实现垂直居中

GFC

GridLayout Formatting Contexts：网格布局格式化上下文。

FFC

Flex Formatting Contexts：自适应格式化上下文。

关于GFC和FFC了解即可。

avatar
文章
阅读
粉丝