BFC与IFC

最新推荐文章于 2024-09-05 09:00:00 发布

BigDaddy2333

最新推荐文章于 2024-09-05 09:00:00 发布

阅读量646

点赞数

分类专栏：前端面试

本文链接：https://blog.csdn.net/qq_41720311/article/details/83932038

版权

前端面试专栏收录该内容

26 篇文章 1 订阅

订阅专栏

先说说FC，FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC。

Block level 的box会参与形成BFC，比如display值为block，list-item,table的元素。

Inline-level的box会参与形成IFC，比如display为inline,inline-table,inline-block的元素。

BFC

BFC原理

内部的盒子会在垂直方向，一个个地放置；
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
BFC的区域不会与float重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
计算BFC的高度时，浮动元素也参与计算。

哪些元素会产生BFC

根元素；
float的属性不为none；
position为absolute或fixed；
display为inline-block，table-cell，table-caption，flex；
overflow不为visible

BFC使用场景

自适应两栏布局

我们先定义两个div：

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

然后定义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;
}

效果：

清除内部浮动

首先是父div套子div

<div class="parent">
  <div class="child"></div>
</div>

然后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已经撑开了。

margin重叠

先定义两个垂直的div：

<div class="p"></div>
<div class="p"></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 class="p"></div>
<div class="wrap">
  <div class="p"></div>
</div>

.wrap {
  overflow:hidden;
}

效果：

IFC布局规则

框会从包含块的顶部开始，一个接一个地水平摆放。
摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。

主要影响IFC内布局的css：