CSS里的BFC和IFC的用法

jiezi

5 年前

Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则。

（可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。

1、BFC 的布局规则例如以下：

①. 内部的盒子会在垂直方向，一个个地放置。

②. 盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的上下 margin 会发生重叠。

③. 每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也是如此。

④.BFC 的区域不会与 float 重叠。

⑤.BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

⑥. 计算 BFC 的高度时，浮动元素也參与计算。

2、介绍过了 BFC 的布局规范，再来说说哪些元素会触发 BFC。

只要元素满足下面任一条件即可触发 BFC 特性

①. 根元素。

②.float 的属性不为 none。

③.position 为 absolute 或 fixed。

④.display 为 inline-block；table-cell；table-caption；flex。

⑤.overflow 不为 visible。

3、接下来说说 BFC 的作用和原理

①、解决 margin 重叠问题

②、解决浮动高度塌陷问题

③、解决侵占浮动元素的问题

首先看看自适应两栏布局
我们先定义两个 div：

<div class="aside"></div>

<div class="main"></div>

4、然后定义 css：

div {
width:300px;
}

.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}

.main {
height:200px;
background-color:red;
}

效果图例如以下：

这正满足了规范的第三条：

每一个元素的左边，与包括的盒子的左边相接触。即使存在浮动也是如此。

所以假设我们须要将黑色区域撑到红色的左边。就须要利用规范的第四条：
BFC 的区域不会与 float 重叠。

也就是说我们须要创造 BFC 区域。我们通过将红色区域的 overflow 设为 hidden 来触发 BFC：

.main {
overflow:hidden;
height:200px;
background-color:red;
}

效果例如以下：

5、接下来看看清除内部浮动

 ** 首先是父 div 套子 div**

6、然后是 css：

.child {
border:1px solid red;
width:100px;
height:100px;
float:left;
}

.parent {
border:1px solid black;
width:300px;
}

效果例如以下：

能够看到，父 div 压根就没有被撑开。
我们再回想一下 BFC 规范中的第六条：
计算 BFC 的高度时，浮动元素也參与计算。

所以我们须要将父 div 触发为 BFC，也就是将其 overflow 设为 hidden：

.parent {
border:1px solid black;
width:300px;
overflow:hidden;
}

效果例如以下：

能够看到父 div 已经撑开了。

7、再谈谈 margin 重叠问题。

先定义两个垂直的 div：

然后定义 margin:

.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}

能够看到 margin 重叠后的效果：

我们再看看 BFC 规范的第二条：

盒子垂直方向的距离由 margin 决定，属于用一个 BFC 的两个相邻 Box 的上下 margin 会发生重叠。

说明两者属于同一个 BFC，所以我们须要两个 div 不属于同一个 BFC。

为第二个 div 套一个父亲 div。然后讲其 overflow 设为 hidden 来激活一个 BFC 就能够使 margin 不再重叠。

</div>

.wrap {
overflow:hidden;
}

效果例如以下：

IFC(Inline Formatting Contexts)
直译为”内联格式化上下文”，IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)

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

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

BFC 的布局规则例如以下：

1.ifc 中的元素会在一行中从左到右排列。

2. 在一行上的所有元素会在该区域形成一个行框。

3. 行宽的高度为包含框的高度，高度为行框中最高元素的高度。

4. 浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度。

5. 行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框。

6. 行框的元素内遵循 text-align 和 vertical-align。

如果大家觉得我的文章写的还不错的话，就关注收藏一下哦！

还可以加我微信一起探讨下前端问题。

vx：rgz987

CSS里的BFC和IFC的用法

一、BFC

二、IFC