1. 在 CSS 布局中，BFC （块级格式化上下文） 和 IFC （行内格式化上下文） 是核心渲染规则，直接决定元素的排列方式、间距计算及相互影响逻辑；
  2. 理解二者的底层原理，能从根源上解决布局错乱 （如 margin 塌陷、浮动溢出、文字环绕等） 问题；

什么是格式化上下文（FC）

  1. 格式化上下文 （Formatting Context） 是 CSS 渲染引擎的一种 布局环境，规定了特定区域内元素的排版规则：

    1. 内部元素的布局不受外部影响，外部元素也不会干扰内部；
    2. 不同格式化上下文的元素遵循各自的排列逻辑 （块级 / 行内 / 弹性 / 网格等）；

  2. BFC 和 IFC 是 CSS2.1 定义的基础格式化上下文，后续 CSS3 扩展了 FlexFC （弹性）、GridFC *（网格）*等，但 BFC/IFC 仍是页面布局的底层基石 （即使使用 Flex/Grid，块级 / 行内元素的基础渲染仍受其影响）；

BFC 的原理和功能

BFC 的含义

  1. BFC（block formatting context）块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC 提供了一个环境，HTML 元素在这个环境中按照一定规则进行布局；

  2. 具有 BFC 特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的的一些特性；

  3. BFC 是一个独立的布局环境，内部的元素布局与外部互不影响；

BFC 的布局规则

  1. 内部的 Box 会在垂直方向，一个个地放置，Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的上下 margin 会发生重叠，每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

  2. BFC 的区域不会与浮动 Box 重叠；

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

  4. 计算 BFC 的高度时，浮动元素也参与计算；

触发 BFC 的条件

  1. 常见的方式：

    元素或属性 属性值
    float left、right
    postion absolute、fixed
    overflow auto、scroll、hidden
    display inline-block、table-cell、flex、grid、flow-root、…

  2. 完整的 BFC 触发方式

BFC 典型案例

解决垂直 margin 塌陷问题

  1. 问题场景：两个相邻块级元素的垂直 margin 发生重叠 （塌陷），实际间距小于设置值；

  2. 原理：BFC 会创建独立的布局环境，内部元素的 margin 计算与外部隔离，相邻块级元素的垂直 margin 不再重叠；

实现两栏布局（侧边栏浮动 + 主内容自适应）

  1. 问题场景：左侧侧边栏浮动后，右侧主内容被覆盖，需实现主内容自适应且不被浮动元素干扰；

  2. 原理：BFC 区域不会与浮动元素重叠，主内容区触发 BFC 后会自动计算侧边栏宽度，占据剩余空间；

解决父容器高度塌陷（子元素浮动）

  1. 问题场景：父容器内的子元素全部浮动时，父容器高度为 0 （塌陷），需让父容器包裹所有子元素；

  2. 原理：BFC 容器在计算高度时，会包含内部浮动元素的占位，避免高度塌陷；

IFC 的原理和功能

IFC 的含义

  1. IFC （inline Formatting Context） 叫做 内联格式化上下文；

  2. 内部的元素从包含块的顶部开始，从左至右 （默认） 排列成一行形成的一个矩形盒子叫做 line box；

IFC 的布局规则

  1. box 是水平一个接一个的排列，水平的 margin、padding，border 是可以有的，垂直方向的对齐，可能是底部对齐，顶部对齐，也可能是基线对齐 （这个是默认的）；

  2. 行框中的内联 box 的高度小于行框的高度时，内联盒子的垂直方向的对齐方式取决于 vertical-align 属性；

  3. 当一个行框水平不能容纳内联 box 时，将会在垂直方向上产生多个行框，上下一个挨着一个，但是不会重叠；

  4. 多个内联盒子的宽度小于包含他们的行框时，在水平方向的分布取决于 text-align 属性；

IFC 典型案例

行内元素垂直对齐（文字与图标 / 图片居中）

  1. 问题场景：行内元素 （如图片、图标） 与文字默认基线对齐，出现垂直错位，需实现居中对齐；

  2. 原理：IFC 内支持 vertical-align 属性，通过设置 middle 可让行内元素基于文字中线对齐；

解决行内元素底部空隙问题

  1. 问题场景：img 等行内元素底部与容器之间存在空隙，影响布局美观；

  2. 原理：行内元素默认基线对齐，基线下方的间距导致空隙；通过 vertical-align: top 改变对齐方式，或父容器设置 line-height: 0 消除行框盒高度，均可解决；

行内元素自动换行与间距控制

  1. 问题场景：多个行内块元素需水平排列，超出容器宽度时自动换行，且保持均匀间距；

  2. 原理：IFC 内的行内元素按水平方向排列，超出容器宽度时自动拆分行框盒，实现换行效果；

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

你好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 什么是格式化上下文（FC）
  2. 2. BFC 的原理和功能
    1. 2.1. BFC 的含义
    2. 2.2. BFC 的布局规则
    3. 2.3. 触发 BFC 的条件
    4. 2.4. BFC 典型案例
      1. 2.4.1. 解决垂直 margin 塌陷问题
      2. 2.4.2. 实现两栏布局（侧边栏浮动 + 主内容自适应）
      3. 2.4.3. 解决父容器高度塌陷（子元素浮动）
  3. 3. IFC 的原理和功能
    1. 3.1. IFC 的含义
    2. 3.2. IFC 的布局规则
    3. 3.3. IFC 典型案例
      1. 3.3.1. 行内元素垂直对齐（文字与图标 / 图片居中）
      2. 3.3.2. 解决行内元素底部空隙问题
      3. 3.3.3. 行内元素自动换行与间距控制