Introduction to formatting contexts 格式化上下文简介

This article introduces the concept of formatting contexts, of which there are several types, including block formatting contexts, inline formatting contexts, and flex formatting contexts. The basics of how they behave and how you can make use of these behaviors are also introduced.
本文介绍格式化上下文的概念,其中有几种类型,包括块格式化上下文、内联格式化上下文和灵活格式化上下文。还介绍了它们的基本行为以及如何利用这些行为。

Everything on a page is part of a formatting context, or an area which has been defined to lay out content in a particular way. A block formatting context (BFC) will lay child elements out according to block layout rules, a flex formatting context will lay its children out as flex items, etc. Each formatting context has specific rules about how layout behaves when in that context.
页面上的所有内容都是格式化上下文的一部分,或者是已定义为以特定方式布局内容的区域。块格式上下文(bfc)将根据块布局规则布局子元素,灵活格式上下文将其子元素布局为灵活项等。每个格式上下文都有关于布局在该上下文中的行为的特定规则。

Block formatting contexts 块格式化上下文

The outermost element in a document that uses block layout rules establishes the first, or initial block formatting context. This means that every element inside the <html> element's block is laid out according to normal flow following the rules for block and inline layout. Elements participating in a BFC use the rules outlined by the CSS Box Model, which defines how an element's margins, borders, and padding interact with other blocks in the same context.
文档中使用块布局规则的最外层元素建立第一个或初始块格式上下文。这意味着<html>元素块中的每个元素都是按照正常流程按照块和内联布局规则进行布局的。参与BFC的元素使用CSS框模型概述的规则,该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。

Creating a new block formatting context 
创建新的块格式上下文

The <html> element isn't not the only element capable of creating a block formatting context. Any element that defaults to block layout also creates a block formatting context for its descendant elements. In addition, there are CSS properties that can cause an element to create a BFC even if it doesn't do so by default. This is useful because a new BFC will behave much like the outermost document in that it becomes a mini-layout inside the main layout. A BFC contains everything inside it, float and clear only apply to items inside the same formatting context, and margins only collapse between elements in the same formatting context.
<html>元素不是唯一能够创建块格式上下文的元素。默认为块布局的任何元素也会为其后代元素创建块格式上下文。此外,还有一些CSS属性可以导致元素创建一个bfc,即使默认情况下它不这样做。这很有用,因为新的bfc的行为与最外层的文档非常相似,因为它在主布局中变成了一个小布局。bfc包含其内部的所有内容,float和clear仅适用于同一格式上下文中的项目,而页边距仅在同一格式上下文中的元素之间折叠。

In addition to the root element of our document (<html>) ,a new BFC is created in the following situations:
除了文档的根元素(<html>)之外,还将在以下情况下创建一个新的bfc:

  • elements made to float using float
  • absolutely positioned elements (including position: fixed or position: sticky
  • elements with display: inline-block
  • table cells or elements with display: table-cell, including anonymous table cells created when using the display: table-* properties
  • table captions or elements with display: table-caption
  • block elements where overflow has a value other than visible
  • elements with display: flow-root or display: flow-root list-item
  • elements with contain: layoutcontent, or strict
  • flex items
  • grid items
  • multicol containers
  • elements with column-span set to all

Let's have a look at a couple of these in order to see the effect creating a new BFC.
让我们来看看其中的一些,以便看到创建新的BFC的效果。

In the example below, we have a floated element inside a <div> with a border applied. The content of that div has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the div now runs through the float. As explained in the guide to in-flow and out of flow elements, the float has been taken out of flow so the background and border of the div only contain the content and not the float.
在下面的示例中,我们在应用了边框的<div>中有一个浮动元素。该DIV的内容与浮动元素一起浮动。由于float的内容比它旁边的内容高,所以现在DIV的边框贯穿了float。如流入和流出元素指南中所述,浮动已被移出流,因此DIV的背景和边框仅包含内容,而不包含浮动。

Creating a new BFC would contain the float. A typical way to do this in the past has been to set overflow: auto or set other values than the initial value of overflow: visible.
创建一个新的BFC将包含该浮动。在过去,一种典型的方法是设置overflow:auto或设置其他值而不是overflow:visible的初始值。

Setting  overflow: auto created a new BFC containing the float. Our div now becomes a mini-layout inside our layout. Any child element will be contained inside it.
设置溢出:自动创建包含浮动的新BFC。现在,我们的DIV在布局中变成了一个迷你布局。任何子元素都将包含在其中。

The problem with using overflow to create a new BFC is that the overflow property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. If you do this, it would be a good idea to comment the code to explain.
使用溢出创建新的bfc的问题在于,溢出属性用于告诉浏览器您希望如何处理溢出的内容。在某些情况下,当您纯粹使用此属性创建bfc时,您会发现不需要的滚动条或剪切阴影。另外,对于未来的开发人员来说,它可能不太可读,因为不太明显为什么要使用溢出来实现这一目的。如果您这样做,最好对代码进行注释以进行解释。

Explicitly creating a BFC using display: flow-root
使用display:flow-root显式创建BFC

Using display: flow-root (or display: flow-root list-item) on the containing block will create a new BFC without any other potentially problematic side-effects.
使用包含块上的display:flow-root(或display:flow-root-list-item)将创建一个新的BFC,而不会产生任何其他潜在的问题副作用。

With display: flow-root on the <div>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.
使用<div>上的display:flow-root,该容器内的所有内容都参与该容器的块格式上下文,并且浮动不会从元素底部弹出。

The name of the flow-root keyword refers to the fact that you're creating something that serves, in essence, like a new root element (like <html> does), given how the new context is created and its flow layout functions.
“流根”关键字的名称指的是这样一个事实,即您创建的内容本质上类似于一个新的根元素(如<html>所做),前提是新上下文是如何创建的,其流布局功能也是如此。

Inline formatting contexts 
行内格式化上下文

Inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. The paragraph creates an inline formatting context inside which such things as <strong>, <a>, or <span> elements are used on text.
内联格式上下文存在于其他格式上下文中,可以将其视为段落的上下文。段落创建了一个内联格式上下文,其中在文本中使用诸如<strong>、<a>或<span>元素等内容。

The box model does not fully apply to items participating in an inline formatting context. In a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right. However, margins above and below the element will not be applied. Vertical padding and borders will be applied but may  overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders.
框模型不完全适用于参与内联格式上下文的项。在水平书写模式行中,水平填充、边框和边距将应用于元素,并左右推送文本。但是,不会应用元素上下的边距。将应用垂直填充和边框,但可能会在内容的上方和下方重叠,因为在内联格式上下文中,填充和边框不会将行框推开。

Other formatting contexts
其他格式上下文

This guide covers flow layout and is therefore not referring to other possible formatting contexts. As such, it is useful to understand that creating any kind of formatting context will change the way elements inside that formatting context behave. This behavior is always described in the specification and also here on MDN.
本指南涵盖了流程布局,因此不涉及其他可能的格式设置上下文。因此,了解创建任何类型的格式上下文都将改变该格式上下文中元素的行为方式是很有用的。这种行为总是在规范中描述的,在MDN中也有描述。

Summary 总结

In this guide, we have looked in more detail at the block and Inline formatting contexts and the important subject of creating a block formatting context (BFC). In the next guide, we will find out how normal flow interacts with different writing modes.
在本指南中,我们更详细地介绍了块和内联格式上下文以及创建块格式上下文(BFC)的重要主题。在下一个指南中,我们将了解正常流如何与不同的写入模式交互。

See also 另请参见