格式化上下文简介

本文介绍了格式化上下文的概念，它有多种类型，包括块级格式化上下文、内联格式化上下文和弹性格式化上下文。还介绍了它们的基本行为以及如何利用这些行为。

页面上的所有内容都是 **格式化上下文** 的一部分，或者说是一个为以特定方式布局内容而定义的区域。**块级格式化上下文** (BFC) 会根据块级布局规则布局子元素，**弹性格式化上下文** 会将子元素布局为 弹性项目 等。每个格式化上下文都有关于该上下文中的布局行为的特定规则。

块级格式化上下文

使用块级布局规则的文档中最外层的元素建立第一个或 **初始块级格式化上下文**。这意味着 <html> 元素的块内每个元素都根据正常流进行布局，遵循块级和内联布局的规则。参与 BFC 的元素使用 CSS 盒子模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。

创建新的块级格式化上下文

<html> 元素不是唯一能够创建块级格式化上下文的元素。任何块级元素都可以通过应用某些 CSS 属性来创建 BFC。

在以下情况下会创建一个新的 BFC

  • 使用 float 使元素浮动
  • 绝对定位 的元素
  • 具有 display: inline-block 的元素
  • 表格单元格或具有 display: table-cell 的元素，包括使用 display: table-* 属性创建的匿名表格单元格
  • 表格标题或具有 display: table-caption 的元素
  • overflow 具有 visible 以外的值的块级元素
  • 具有 display: flow-root 或 display: flow-root list-item 的元素
  • 具有 contain: layout、content 或 strict 的元素
  • 弹性项目
  • 网格项目
  • 多列容器
  • 具有设置为 all 的 column-span 的元素

这很有用，因为新的 BFC 的行为就像最外层的文档一样，它成为主布局中的一个迷你布局。BFC 包含其中的所有内容，float 和 clear 只适用于同一格式化上下文中的项目，边距只会在同一格式化上下文中的元素之间折叠。

BFC 创建示例

让我们看一下其中几个，看看创建新 BFC 的效果。

在下面的示例中，我们有一个在带边框的 `<div>` 中的浮动元素。该 `<div>` 的内容与浮动元素并排浮动。由于浮动内容的高度比其旁边的内容高，因此 `<div>` 的边框现在穿过浮动元素。正如关于流内和流外元素的指南中所述，浮动元素已从流中移除，因此 `div` 的背景和边框仅包含内容，而不包含浮动元素。

创建新的 BFC 将包含浮动元素。过去常用的方法是设置 `overflow: auto` 或设置除 `overflow: visible` 的初始值以外的其他值。

设置 `overflow: auto` 创建了一个包含浮动元素的新 BFC。现在，我们的 `<div>` 成为布局内部的迷你布局。任何子元素都将包含在其中。

使用 `overflow` 创建新 BFC 的问题在于，`overflow` 属性用于告诉浏览器您希望如何处理溢出内容。在某些情况下，您会发现当纯粹使用此属性创建 BFC 时，会出现不需要的滚动条或裁剪的阴影。此外，它可能对未来的开发人员来说可读性不强，因为他们可能不清楚为什么您将 `overflow` 用于此目的。如果您这样做，最好对代码进行注释以说明原因。

使用 `display: flow-root` 明确创建 BFC

在包含块上使用 `display: flow-root`（或 `display: flow-root list-item`）将创建新的 BFC，而不会产生任何其他潜在的负面影响。

在 <div> 上使用 `display: flow-root`，该容器内的所有内容都参与该容器的块级格式化上下文，并且浮动元素不会从元素底部探出。

flow-root 关键字的名称指的是，您正在创建的东西本质上就像一个新的根元素（比如 <html>），考虑到新上下文是如何创建的以及它的流式布局功能。

内联格式化上下文

行内格式化上下文存在于其他格式化上下文内部，可以被认为是段落的上下文。段落创建一个行内格式化上下文，其中使用诸如 <strong>、<a> 或 <span> 这样的元素来处理文本。

盒子模型并不完全适用于参与行内格式化上下文的项目。在水平书写模式行中，水平填充、边框和边距将应用于元素并将文本向左和向右推开。但是，元素上下的边距不会应用。垂直填充和边框将应用，但可能会与上下内容重叠，因为在行内格式化上下文中，行框不会被填充和边框推开。

其他格式化上下文

本指南涵盖流式布局，因此不涉及其他可能的格式化上下文。因此，了解创建任何类型的格式化上下文都会改变该格式化上下文内元素的行为非常有用。这种行为始终在规范中描述，并且也在这里在 MDN 上描述。

总结

在本指南中，我们更详细地介绍了块级和行内格式化上下文以及创建块级格式化上下文 (BFC) 的重要主题。在下一份指南中，我们将了解正常流如何与不同的书写模式交互。

另请参阅