# BFC 与 IFC

作者: 刘周玮日期: 2020-11-15

i know it when i see it !

学习目标：了解 BFC 和 IFC 概念，清楚什么情况下会触发形成 BFC 或 IFC，及他们的作用规则

# 1. 常见定位方案

普通流 (normal flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

绝对定位 (absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

# 2. BFC

# 2.1 概念

Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。这块区域内的元素只遵循特定规则，不受外部影响。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

# 2.2 BFC 内部规则

BFC 是一块独立规则的区域，不受外部影响，而内部元素也不会影响到外部。
清除浮动，触发 BFC 后能感知得到浮动元素的存在。BFC 的区域不会与 float 元素重叠。
BFC 感知得到浮动元素的高度。计算 BFC 的高度时，浮动元素也参与计算。

# 2.3 触发 BFC

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

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、table-caption 的元素
匿名表格单元格元素，如 display 为 table、table-row、table-row-group、table-header-group、table-footer-group（分别是 HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table
overflow 除了 visible 以外的值 (hidden、auto、scroll)
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
display 为 flex 或 inline-flex 元素的直接子元素
display 为 grid 或 inline-grid 元素的直接子元素
多列容器（元素的 column-count 或 column-width 不为 auto ,包括 column-count 为 1 ）
column-span 为 all 的元素始终会创建一个新的 BFC ，即使该元素没有包裹在一个多列容器中

# 2.4 BFC 特性

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

<style>
  .block-div {
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 255, 0.6);
    margin: 50px;
  }
</style>
<body>
  <div class="block-div"></div>
  <div class="block-div"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12

从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。

首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

<style>
  .container {
    border: 1px solid #000;
    overflow: hidden;
  }
  .block-div {
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 255, 0.6);
    margin: 50px;
  }
</style>
<body>
  <div class="container">
    <div class="block-div"></div>
  </div>
  <div class="container">
    <div class="block-div"></div>
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

【补充】：

外边距折叠可以分为：同一个 BFC 下父子组件的外边距折叠与同一个 BFC 下兄弟组件的外边距折叠。父子组件的外边距折叠可以通过在父组件上设置可以触发 BFC 的任意一个 CSS 属性，使父组件与子组件处于两个不同的 BFC 中，以防止外边距折叠。兄弟组件的外边距折叠可以通过在其中一个组件上包裹一个 BFC，防止外边距折叠，也可以通过设置使其中一个组件脱离当前 BFC 的 CSS 属性来防止外边距折叠，具体使用的 CSS 属性需要根据 UI 设计进行选择。

① 兄弟组件外边距折叠的解决方法
/*在其中一个组件上包裹一个BFC*/
.brother1 {
  margin-bottom: 5rem;
}
div {
  display: flow-root; /_任一可触发 BFC 的 CSS 属性_/
}
.brother2 {
  margin-top: 4rem;
}
}
/_使其中一个组件脱离当前 BFC_/
.brother1 {
  margin-bottom: 5rem;
}
.brother2 {
  display: absolute; /_ inline-block | fixed | float |... _/
  margin-top: 4rem;
}
② 父子组件外边距折叠的解决方法
.father {
    display: flow-root; /*任一可触发BFC的CSS属性*/
    margin-top: 3rem;
}
.son {
  margin-top: 4rem;
}

2. BFC 可以包含浮动的元素（清除浮动）

我们都知道，浮动的元素会脱离普通文档流，来看下下面一个例子

<style>
  .container {
    border: 1px solid #000;
    /* overflow: hidden/scroll/auto; */
  }
  .block-div {
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 255, 0.6);
    float: left;
  }
</style>
<body>
  <div class="container">
    <div class="block-div"></div>
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使容器触发 BFC，比如设置容器的 overflow 属性（ visible 值除外），那么容器将会包裹着浮动元素。

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

<style>
  .float-div {
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 255, 0.6);
    float: left;
  }
  .block-div {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 255, 0.1);
    /* overflow: hidden/scroll/auto; */
  }
</style>
<body>
  <div class="float-div"></div>
  <div class="block-div">
    我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px;
    background: rgba(0,0,255,0.1);
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：

这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度(去掉上面右边内容的宽度)。

.block-div:nth-of-type(1) {
  float: left;
  width: 100px;
  height: 300px;
  background-color: green;
}
.block-div:nth-of-type(2) {
  float: right;
}
.block-div:nth-of-type(3) {
  /* 创建BFC */ /* overflow: hidden; */
  height: 300px;
  background-color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2.5 应用

两栏布局

三栏布局 (float 布局或 grid 布局)

# 3. IFC

# 3.1 概念

Inline Formatting Contexts，也就是“内联格式化上下文”。IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来的。

# 3.2 触发 IFC

块级元素中只包含内联级别元素

形成条件简单，需要注意的是当 IFC 中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个 IFC。

# 3.3 布局规则

不能指定宽高。行框（line box，能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框）的宽度是由包含块（containing block）和与其中的浮动来决定；行框的高度由行高来决定。
子元素水平方向横向排列，并且垂直方向起点为包含块的顶部（大部分情况下是元素顶部）。
子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
在垂直方向上，子元素会以不同形式来对齐（vertical-align）。
同一 IFC 内“line box”的高度也可能各不相同，例如：某行有一张很高的图片，但其他行只有文字。
IFC 中的“line box”一般左右边贴紧其包含块，但float 元素会优先排列。
IFC 中的“line box”高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同。
当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性值来决定。
当一个“inline box”超过父元素的宽度时，它会被分割成多个 boxes，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下或“inline box”只包含一个字符，“inline box”将不可被分割，将会溢出父元素。
当一个“inline box”被分割，margin、border、padding 在分割处不会产生视觉效果。

<style>
  .warp {
    border: 1px solid red;
    width: 400px;
  }
  .text {
    margin: 20px;
    background: rgba(0, 0, 255, 0.5);
  }
  .f-l {
    float: left;
  }
</style>

<body>
  <div class="warp">
    <span class="text">这是文本1</span>
    <span class="text">这是文本2</span>
    <span class="text f-l">这是文本3</span>
    <span class="text">这是文本4</span>
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

正常情况下的 IFC：

设置浮动元素：该元素优先排列

设置 line-height：行框撑大

设置 margin：超过父元素的宽度，一个“line box”被分割成多个 boxes，这些 boxes 分布在多个“line box”中。只有水平方向上的 margin 有效，垂直方向无效。

# 4. 参考

BFC 原理