CSS 多列布局模块第一级

1. 引言

（本节非规范性内容。）

本模块描述了 CSS 中的多列布局。通过使用本文档中描述的功能，样式表可以声明元素的内容应以多列形式进行布局。

CSS 中的其他布局方法，应用于父元素时，会更改直接子元素的显示属性。例如，当创建一个三列网格布局时，网格容器的直接子元素会变成网格项，并被放置在列轨中，每个单元格中一个元素，必要时创建其他行。

然而，多列容器的子元素依然保持正常流，该流被安排在若干列中。这些列具有灵活的行内尺寸，因此会根据可用空间通过改变列的大小或显示的列数进行响应。

在 CSS 中描述多列布局非常简单。以下是一个简单的示例：

body { column-width: 12em }

在此示例中，body 元素被设置为列宽至少为 12em。列的确切数量将取决于可用空间。

在样式表中也可以明确设置列的数量：

body { column-count: 2 }

在这种情况下，列的数量是固定的，而列的宽度将根据可用宽度而变化。

可以使用速记属性 columns 在一个声明中同时设置这两个属性。

在这些示例中，分别设置了列的数量、列的宽度以及列的数量和宽度：

body { columns: 2 } 
body { columns: 12em } 
body { columns: 2 12em }

本模块中引入的另一组属性描述了列之间的间隙和规则。

body { 
  column-gap: 1em; 
  column-rule: thin solid black; 
}

上面的第一个声明将两个相邻列之间的间隙设置为 1em。列间距类似于填充区域。间隙中间将有一个通过 column-rule 属性描述的规则。

column-rule 属性的值与 CSS border 属性的值类似。和 border 一样，column-rule 是一个速记属性。

在此示例中，上面示例中的速记属性 column-rule 被展开：

body { 
  column-gap: 1em; 
  column-rule-width: thin; 
  column-rule-style: solid; 
  column-rule-color: black; 
}

column-fill 和 column-span 属性使样式表在多列布局中具有更广泛的视觉表现力。

在此示例中，列设置为平衡，即具有大致相同的长度。同时，h2 元素被设置为跨所有列。

div { column-fill: balance }
h2 { column-span: all }

测试

multicol-fill-balance-029.html （在线测试）（源码）

本规范引入了十个新属性，这些属性都在上面的示例中使用了。

如果所有列属性都具有初始值，则元素的布局将与仅包含一列的多列布局相同。

列间隙（对角线阴影）和列规则在此多列容器的示例呈现中显示，并带有填充区域（交叉阴影）。这些阴影区域仅用于说明目的。在实际实现中，这些区域将由背景决定，第二张图片显示了带有列规则的多列容器的渲染。

用于显示图示不可见部分的说明图 — 带有不可见列跨度和多列容器内填充的多列布局。

1.1. 值的定义

本规范遵循 CSS 属性定义约定，引用了 [CSS21]，并使用了值定义语法来自 [CSS-VALUES-3]。未在本规范中定义的值类型在 CSS 值与单位 [CSS-VALUES-3] 中定义。结合其他 CSS 模块可能扩展这些值类型的定义。

除了各属性定义中列出的特定值外，本规范中定义的所有属性还接受 CSS 范围内的关键字作为其属性值。为了可读性，未在此明确重复。

2. 多列模型

当元素的 column-width 或 column-count 属性不为 auto 时，会创建一个多列容器（简称 多列容器），并因此作为多列布局的容器。

测试

基础多列测试。

测试展示 auto 值不会创建多列容器。

multicol-count-computed-004.xht （在线测试）（源码）

多列属性不会继承。

inheritance.html （在线测试）（源码）

带滚动列的多列布局。

multicol-scroll-content.html （在线测试）（源码）

高度为零的多列布局。

在传统的 CSS 盒模型中，元素的内容流入相应元素的内容框中。多列布局引入了一个由分片上下文组成的匿名分片容器，称为列框（或简称列）。这些列框创建了一个独立的块格式化上下文，多列容器的内容流入其中，并为其非定位子元素形成包含块。

在此示例中，图像的宽度使用以下规则设置：

img { 
  display: block; 
  width: 100%; 
}

由于列框创建了一个新的块格式化上下文，所以 width 是相对于列框计算的。因此，图像不会溢出列框：

由于列框创建了一个新的块格式化上下文，因此多列容器的第一个子元素设置的顶部边距不会与多列容器的边距折叠。

第一个段落上方的边距未折叠，在多列容器的第一行上方留出了 1em 的边距。

测试

出现在多列布局中的浮动元素是根据浮动出现的列框进行定位的。

在此示例中，这段 CSS 代码描述了图像的呈现：

img { 
  display: block; 
  float: right; 
}

在 HTML 中，图像出现在句子结尾 "the leg of a chicken" 之后。

在列框中溢出的内容会沿块轴进行分片，并继续在下一个列框中显示。

注意：列框是匿名框，不会成为包含块，用于绝对定位的框。用于创建包含块的position 属性，应用于多列容器，它是主框。

测试

在此示例中，多列容器具有position: relative，因此成为包含块。图像是多列容器的直接子元素，并且具有position: absolute。它的定位基于多列容器，而不是列框。

.container { 
          position: relative; 
          column-count: 3; 
        } 
        img { 
          position: absolute; 
          top: 20px; 
          left: 40px; 
        }

多列容器的脱离文档流的后代元素会影响列的平衡，以及多列容器的块大小。

测试

列框按多列容器的行基方向排序，并排列成多列行。列宽是列框在行内方向的长度。列高是列框在块方向的长度。同一行中的所有列框具有相同的列宽，且同一行中的所有列框具有相同的列高。

测试

以下测试与列内容的基线对齐有关，尽管本规范中未对此进行定义。

以下测试检查同时作为多列容器的列表项的行为。

测试多列中的网格项

balance-grid-001.html (live test) (source)

以下测试检查表格元素的行为。

以下测试检查绘制顺序是否正确。

以下测试与多列属性的动画或转换有关。

与实现错误相关的测试，与具体的规范性文本无关。

与多列相关的打印和分页媒体测试。

注意：在使用垂直书写模式设置的文本中，块方向是水平的。在垂直书写模式下，列是水平排列的，块流动的方向可以是从右到左，或从左到右。因此，column-width 属性指的是列的内联大小，而不是物理的水平宽度。

第一张图片显示了具有从左到右的内联方向的水平文本。第二张显示了块从右向左流动的垂直文本。第三张显示了块从左向右流动的垂直文本。 — 一张展示了由于书写模式不同，列可能的不同排列方式的图示。
从左到右：horizontal-tb, vertical-rl, vertical-lr。

测试

关于垂直书写模式的测试。

在每个多列线中，多列容器中的相邻列框由列间距分隔，列间距中可能包含一个列规则。相同多列容器中的所有列间距是相等的。如果出现列规则，相同多列容器中的所有列规则也是相等的；列规则只出现在两侧都有内容的列之间。

在最简单的情况下，多列容器只包含一行列，每列的高度等于多列容器内容框的使用高度。然而，分段或跨列可以将多列容器的内容分为多行多列线。

如果多列容器被分页，每列的高度受页面限制，内容将在下一页的新列框中继续；列框永远不会跨页拆分。

当跨列元素将多列容器分开时，也会发生同样的效果：跨列元素之前的列会平衡并缩短以适应其内容。跨列元素之后的内容将流入新的一行列框中。

一个图表显示了一个跨列元素导致上方的列被缩短，文本继续在下方的新列中 — 展示了跨列元素如何分割多列容器。

因此，多列容器是一个常规的块容器，它建立了一个新的独立的格式化上下文，其内容由一系列多列线和跨列元素组成。每个多列线作为一个块级框，为其列框建立了一个多列格式化上下文；每个跨列元素作为一个块级框，根据其display属性值，建立了一个独立的格式化上下文。

允许嵌套多列容器，但可能存在特定于实现的限制。

测试

注意：无法在列框上设置属性/值。例如，无法设置某个列框的背景，并且列框没有填充、边距或边框的概念。未来的规范可能会增加额外的功能。例如，可能支持不同宽度和不同背景的列。

注意：列高大于视口的多列容器可能会带来可访问性问题。有关更多详细信息，请参阅可访问性注意事项。

3. 列数和列宽

在布局多列内容时，确定列数和列宽是基本步骤。以下属性用于设置列数和列宽：

column-count
column-width

第三个属性，columns，是一个简写属性，它同时设置column-width和column-count。

其他因素，如显式的列分隔符、内容和高度限制，也可能影响实际的列数和列宽。

3.1. 列的内联尺寸：column-width属性

名称：	column-width
值：	auto \| <length [0,∞]>
初始值：	auto
应用于：	块容器，但不包括表包装框
是否继承：	否
百分比：	不适用
计算值：	关键词auto或绝对长度
规范顺序：	根据语法
动画类型：	按计算值类型

此属性描述了多列容器中列的宽度。

auto

表示列宽将由其他属性决定（例如，如果column-count有一个非auto值）。

<length [0,∞]>

描述了最佳列宽。实际列宽可能会更宽（以填充可用空间），也可能更窄（仅当可用空间小于指定的列宽时）。不允许负值。使用的值将被限制在至少1px。

测试

例如，考虑以下样式表:

div {
  width: 100px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

在这个100px宽的元素内，有足够的空间放置两列45px宽的列。为了填满可用空间，实际列宽将增加到50px。

另一个示例，考虑以下样式表:

div {
  width: 40px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

可用空间小于指定的列宽，因此实际的列宽将会减少。

为了确保column-width可以用于竖排文本，列宽表示列内行框的长度。

注意：使column-width具有一定灵活性的原因是为了实现可以适应多种屏幕尺寸的可扩展设计。要设置精确的列宽，还必须指定列间距和多列容器的宽度（假设是水平文本）。

3.2. 列数：column-count 属性

名称:	column-count
值:	auto \| <integer [1,∞]>
初始值:	auto
适用于:	块级容器，除了表包装盒
是否继承:	否
百分比:	不适用
计算值:	指定值
规范顺序:	按语法
动画类型:	按计算值类型

该属性描述了多列容器的列数。

auto: 表示列数将由其他属性决定 (例如，column-width 如果其具有非 auto 值)。
<integer [1,∞]>: 描述了将内容流入元素的最佳列数。值必须大于 0。如果 column-width 和 column-count 都具有非 auto 值，整数值描述最大列数。

测试

示例:

body { column-count: 3 }

3.3. column-width 和 column-count 的简写: columns 属性

名称:	columns
值:	<'column-width'> \|\| <'column-count'>
初始值:	见各个属性
适用于:	见各个属性
是否继承:	见各个属性
百分比:	见各个属性
计算值:	见各个属性
动画类型:	见各个属性
规范顺序:	按语法

这是一个用于设置 column-width 和 column-count 的简写属性。省略的值将被设置为它们的初始值。

以下是使用 columns 属性的一些有效声明：

columns: 12em;      /* column-width: 12em; column-count: auto */
columns: auto 12em; /* column-width: 12em; column-count: auto */
columns: 2;         /* column-width: auto; column-count: 2 */
columns: 2 auto;    /* column-width: auto; column-count: 2 */
columns: auto;      /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */

测试

3.4. 伪算法

下面的伪算法确定了 column-count (N) 和 column-width (W) 的使用值。伪算法中还有一个变量：U 是多列容器的使用宽度。

注意：多列容器的使用宽度 U 可能依赖于元素的内容，此时它还依赖于 column-count 和 column-width 属性的计算值。本规范未定义如何计算 U。另一个模块（可能是基本框模型 [CSS3BOX] 或框尺寸模块 [CSS3-SIZING]）预计将定义这一点。

测试

floor(X) 函数返回小于等于 X 的最大整数 Y。

(01)  if ((column-width = auto) and (column-count = auto)) then
(02)      exit; /* 不是多列容器 */
(03)  if column-width = auto then
(04)      N := column-count
(05)  else if column-count = auto then
(06)      N := max(1,
(07)        floor((U + column-gap)/(column-width + column-gap)))
(08)  else
(09)      N := min(column-count, max(1,
(10)        floor((U + column-gap)/(column-width + column-gap))))

以及：

(11)  W := max(0, ((U + column-gap)/N - column-gap))

为了找到自动重复列的数量，UA 必须将列的大小舍入到 UA 指定的值，以避免除以零。建议这个值舍入到 1px 或更小。

在分片上下文中，例如分页媒体，用户代理可以基于每个片段执行此计算。

column-count 的使用值是在不考虑显式列分隔或受限列高的情况下计算的，而实际值会考虑这些因素。

测试

column-count-used-001.html (live test) (source)

在这个例子中，由于显式列分隔，实际的 column-count 比使用的 column-count 更高：

div { 
  width: 40em; 
  columns: 20em; 
  column-gap: 0; 
}

p { 
  break-after: column; 
}

<div>
  <p>one 
  <p>two 
  <p>three 
</div>

容器内绘制了两列，外面还有一列 — 计算出的 column-count 为 auto，使用的 column-count 为 2，而实际的 column-count 为 3。

实际的 column-count 可能比使用的 column-count 更低。考虑这个例子：

div { 
  width: 80em; 
  height: 10em; 
  columns: 20em; 
  column-gap: 0; 
  column-fill: auto; 
}

<div>foo</div>

计算出的 column-count 为 auto，使用的 column-count 为 4，而实际的 column-count 为 1。

3.5. 层叠上下文

多列容器中的所有列框都位于相同的层叠上下文中，其内容的绘制顺序如 CSS 2.1 中所规定。列框不会建立新的层叠上下文。

测试

multicol-rule-stacking-001.xht (live test) (source)

4. 列间距和列规则

列间距和列规则放置在同一多列容器的列之间。列间距和列规则的长度等于列高。列间距占据空间。也就是说，列间距会推开相邻列中的内容（在同一多列容器内）。

测试

一个列规则在列间距的中间绘制，端点位于多列容器的相对内容边缘。列规则不占用空间。也就是说，列规则的存在或厚度不会改变其他任何元素的位置。如果列规则比它的间距宽，相邻的列框将会重叠该规则，并且规则可能会扩展到多列容器的框之外。列规则绘制在多列容器的边框正上方。对于可滚动的多列容器，请注意，虽然多列容器的边框和背景显然不会滚动，但规则需要随着列一起滚动。列规则只绘制在两个都有内容的列之间。

测试

基本列规则测试

如果列规则比它的间距宽，相邻的框会重叠。

multicol-rule-001.xht (live test) (source)
multicol-rule-large-001.xht (live test) (source)
multicol-rule-large-002.xht (visual test) (source)

列规则仅绘制在有内容的两列之间。

测试背景和列规则的行为。

4.1. 列之间的排水沟：column-gap 属性

column-gap 属性在[CSS3-ALIGN]中定义。

在多列格式化上下文中，normal 对 column-gap 属性的使用值为 1em。这确保了在使用初始值时列是可读的。如果列之间有列规则，它将出现在间隙的中间。

测试

测试间隙是否可动画化。

4.2. 列规则的颜色：column-rule-color 属性

名称:	column-rule-color
值:	<color>
初始值:	currentcolor
应用于:	多列容器
是否继承:	否
百分比:	N/A
计算值:	计算后的颜色
规范顺序:	按语法
动画类型:	按计算值类型

<color>: 指定列规则的颜色。

测试

4.3. 列规则的样式：column-rule-style 属性

名称:	column-rule-style
值:	<line-style>
初始值:	none
应用于:	多列容器
是否继承:	否
百分比:	N/A
计算值:	指定的关键词
规范顺序:	按语法
动画类型:	离散

column-rule-style 属性设置元素列之间的规则样式。 <line-style> 的值如同折叠边框模型中的解释。

测试

none 值会强制将 column-rule-width 的计算值设为 0。

4.4. 列规则的宽度：column-rule-width 属性

名称:	column-rule-width
值:	<line-width>
初始值:	medium
应用于:	多列容器
是否继承:	否
百分比:	N/A
计算值:	绝对长度，作为边框宽度捕捉；如果列规则样式为 none 或 hidden，则为 0
规范顺序:	按语法
动画类型:	按计算值类型

该属性设置列之间的规则宽度。负值不被允许。

测试

4.5. 列规则简写: column-rule 属性

名称:	column-rule
值:	<'column-rule-width'> \|\| <'column-rule-style'> \|\| <'column-rule-color'>
初始值:	查看各个属性
应用于:	查看各个属性
是否继承:	查看各个属性
百分比:	查看各个属性
计算值:	查看各个属性
动画类型:	查看各个属性
规范顺序:	按语法

该属性是 column-rule-width, column-rule-style, 和 column-rule-color 的简写。省略的值将设置为它们的初始值。

测试

在这个例子中，列规则和列间隙的宽度相同。因此，它们将完全占据相同的空间。

body {
  column-gap: 35px;
  column-rule-width: 35px;
  column-rule-style: solid;
  column-rule-color: black;
}

测试

5. 列断点

当内容布局为多列时，用户代理必须确定列断点的位置。将内容分成多列的问题类似于将内容分页，该过程在 CSS 2.1 第 13.3.3 节中描述 [CSS21]。

引入了三个新属性，以便在与页面断点相同的属性中描述列断点: break-before、break-after 和 break-inside。

5.1. 控制分段: break-before、break-after、break-inside 属性

break-before、break-after 和 break-inside 在 [CSS3-BREAK] 中定义。

测试

multicol-break-000.xht (live test) (source)
multicol-break-001.xht (live test) (source)
multicol-br-inside-avoidcolumn-001.xht (live test) (source)
moz-multicol3-column-balancing-break-inside-avoid-1.html (manual test) (source)

6. 跨列

column-span 属性使元素可以跨越多个列。

6.1. 跨列显示元素: column-span 属性

名称:	column-span
值:	none \| all
初始值:	none
适用对象:	流内的块级元素
是否继承:	否
百分比:	N/A
计算值:	指定的关键字
规范顺序:	根据语法
动画类型:	离散

测试

column-span-invalid.html (实时测试) (源代码)

此属性描述一个元素跨越多少列。值为:

none

元素不会跨越多列。

测试

multicol-span-none-001.xht (实时测试) (源代码)

all

元素会强制生成列断点，并被从流中移出以跨越最近的具有多列祖先的所有列同时属于相同的块格式化上下文。正常流中的内容在元素之前自动均衡地分布在所有列中在元素出现之前的立即前一多列行，并且任何后续内容都将在元素之后流入新的多列行。该元素建立一个独立的格式化上下文。

注意:元素是否建立一个新的格式化上下文，不取决于该元素是否为多列的后代。当 column-span 为 all 时，它总是会这样做。这有助于在设计中消除多列时保持鲁棒性，或当媒体查询在某些情况下关闭多列时。

测试

跨越多列的元素称为多列跨越元素，它创建的框称为多列跨越框。

跨越框的包含块是多列容器本身。因此，如果跨越框本身没有为其中的绝对定位的框建立包含块，那么它们的包含块链会直接跳过多列容器，略过跨越框和多列容器之间的任何祖先元素。

虽然跨越框被从流中移出，但这不会影响跨越元素的绘制顺序 [CSS21]。

在此示例中，h2 元素已被添加到示例文档中的第六个句子之后（即在 “the leg of a” 之后）。应用了以下样式:

h2 { column-span: all; background: silver }

通过将 column-span 设置为 all，所有出现在 h2 元素之前的内容都显示在 h2 元素上方。

请注意，由于跨越框分割了多列行，它也会中断任何列规则（它们仅绘制在列之间的多列行中）。

跨越元素可能低于第一级后代只要它们属于同一个格式化上下文，并且在跨越元素和多列容器之间没有任何元素为固定定位的后代建立包含块。

在此示例中，设置了 column-span: all 的元素位于带有 transform: rotate(90deg) 的元素中。 transform 属性为固定定位的后代建立了包含块，因此不会创建跨越框。

<article>
  <section>
    <div class="spanner">尝试创建跨越框</div>
  </section>
</article>

article {
  columns: 2;
}

section {
  transform: rotate(90deg);
}

.spanner {
  column-span: all;
  background: silver;
}

测试

如果跨越框之前的片段是空的，则不会发生特殊情况；顶部的边距/边框/内边距位于跨越元素的上方，作为一个空的片段。

在此示例中，多列容器是 article 元素。在此父元素内是一个段落和一个 section 元素。 section 包含一个 h2 标题，设置为 all，这跨越了所有三列，而包含的 section 仍然在列框中。

h2 是 section 的第一个子元素。这意味着该 section 的边距、边框（在图中以红色显示）和内边距出现在跨越的 h2 之前，作为一个空片段。

<article>
  <p>...</p>
  <section>
    <h2>An h2 element</h2>
    <p>...</p>
  </section>
</article>

section {
  border: 2px solid red;
  margin-top: 65px;
  padding-top: 20px;
}

h2 {
  column-span: all;
  background: silver
}

一个元素跨越了所有三列，section 的红色边框在跨越框之前中断。 — `h2` 元素设置为 column-span: all， section 有红色边框和顶部内边距及边距。

测试

跨越元素占用的空间比元素本身占用的空间更多。当空间有限时，可能无法找到足够的空间放置跨越元素。在这种情况下，用户代理可能会将该元素视为已在此属性上指定了 none。

在此示例中，h2 元素出现在内容的后面，并且多列容器的高度受到限制。因此，h2 元素出现在溢出部分，并且没有足够的空间让该元素跨越列。结果，该元素表现得就像指定了 column-span: none。

h2 元素出现在溢出列中，并且表现得像指定了 column-span none。

此示例与上一个示例类似，只是 H2 元素自然出现在最后一列中。但仍然没有足够的空间使该元素跨越列。

h2 元素出现在最后一列，并且表现得像指定了 column-span none。

测试

multicol-span-all-002.xht (live test) (source)

在分段上下文中，跨越元素会在所有片段中被遵守。在此示例中，我们处于分页媒体中，并且前三段之后有列中断。一个跨越的 H2 元素出现在第四段之后。

跨越元素是块级盒子，因此两个相邻跨越元素的边距会相互折叠。如果两个跨越元素之间仅由绝对定位项目隔开，它们的边距也会相互折叠，因为绝对定位项目不会创建列盒子。由于列盒子建立了一个新的块格式化上下文，因此列盒子内元素的边距不会与跨越元素的边距折叠。

测试

跨越元素建立了新的格式化上下文，但它们的边距可以被周围环境所改变。在此示例中，两个跨越元素自然地位于页面顶部。第一个跨越元素的顶部边距由于连接了未强制的中断而被截断。两个跨越元素之间的边距会相互折叠。但是，第二个跨越元素的底部边距不会与后续元素的顶部边距折叠。

h2 {
  margin: 16px 0;
  column-span: all;
  background: silver
}
p { margin-top: 16px }

两个跨越元素之间的边距折叠，但跨越元素的底部边距与下一个元素的顶部边距不会折叠。

测试

与跨越元素相关的附加测试。

7. 填充列

填充列有两种策略：列可以平衡填充，也可以不平衡填充。如果列是平衡的，用户代理应尽量减少列高的差异，同时遵守强制中断、widows 和 orphans，以及其他可能影响列高的属性。如果列不平衡填充，则它们会按顺序填充；一些列可能只部分填充，或没有任何内容。

7.1. 列平衡：column-fill 属性

名称：	column-fill
值：	auto \| balance \| balance-all
初始值：	balance
适用于：	多列容器
是否继承：	否
百分比：	不适用
计算值：	指定的关键字
规范顺序：	根据语法
动画类型：	离散

此属性指定在不立即位于跨列元素之前的多列行中的内容是否平衡填充列。

测试

可用的值包括：

balance

尽可能在各列之间均衡内容。在分段上下文中，只有最后一个片段是平衡的。

测试

balance-all

尽可能在各列之间均衡内容。在分段上下文中，所有片段都保持平衡。

auto

按顺序填充列

测试

在连续上下文中，当存在溢出列时，此属性不会产生任何效果。

在此示例中，一篇文章只有一个简短的段落，它可以容纳三行。由于列平衡，三行内容显示在三个不同的列中。

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

在此示例中，关闭了列平衡，文章设置了高度：

article {
  width: 60em;
  height: 4em;
  columns: 4;
  column-fill: auto;
}

结果，第一列填充了所有内容：

在此示例中，一篇文章包含两个段落：首先是一个较长的段落，然后是一个较短的段落。使用了以下代码：

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

p {
  break-after: column;
}

最短的列高度包含五行文本。确定列高度后，按顺序填充列。因此，第三列与前两列一样高，而最后一列则显著较短。

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

在此示例中，文章以一个不可分割的图像开始，这确定了列的高度。随后的内容按顺序填充到其余的列中：

测试

与流外元素结合的列平衡相关测试。

其他与平衡相关的测试

8. 溢出

8.1. 多列容器内部的溢出

除了可能导致列分割的情况，扩展到列框外的内容仍然会可见溢出，并且不会被列框裁剪。

注意：请参阅§ 5 列分割，以及§ 8.2 分页与多列容器外的溢出了解是否裁剪至多列容器的内容框。

在此示例中，图像宽度大于列宽：

测试

8.2. 分页与多列容器外的溢出

多列容器边缘超出列框的内容和列规则会根据overflow属性进行裁剪。

由于以下原因，多列容器可能包含比实际容纳空间更多的列：

使用声明约束了列的高度（例如，使用height或 max-height）。在这种情况下，会在内联方向创建额外的列框。
页面的尺寸。在这种情况下，额外的列框会移动到下一页。
明确的列分割。在这种情况下，额外的列框将在连续上下文中创建于内联方向，对于分段媒体，会移动到下一个片段。

测试

测试以检查可滚动容器是否未在多个列中拆分。

出现在多列容器之外的列在连续上下文中被称为溢出列。溢出列可能会影响多列容器的高度。

在这个示例中，多列容器的高度被限制为最大高度。同时，样式表指定了溢出的内容应该是可见的：

div {
  max-height: 5em;
  overflow: visible;
}

因此，列的数量增加了。

在连续上下文中，溢出的列可能会影响多列容器的高度。在此示例中，一个溢出的列包含四行文本。多列容器的高度将调整到足以容纳该列。

四列，溢出列比前三列更高 — 最后一列是溢出列，但比其他列更高。容器的高度足以容纳该列。

在分段上下文中，溢出的内容进入后续分段中的列。以示例31中的相同内容为例，如果页面框只能容纳五行格式化文本，则第一页上会显示如下内容：

假设列平衡，第二页将显示如下内容：

在此示例中，在段落后生成了显式的列中断：

p {
  break-after: column;
}

因此，列的数量增加，额外的列在行内方向被添加：

在分页媒体中，额外的列显示在下一页。使用与上一个示例相同的代码，最后一个段落出现在第二页。这将在第一页显示如下内容：

这将在第二页显示如下内容：

由于列平衡，最后一段被分割在三列之间。

附录 B. 更改

本附录为说明性。

2021年10月12日的候选推荐标准 (CR)中的更改

添加了文本“且在跨列元素与多列容器之间没有建立固定定位后代的包含块的内容。”2022年3月9日解决

2021年2月12日的工作草案 (WD)中的更改

添加了文本“多列容器的流外后代会影响列的平衡，以及多列容器的块尺寸。”2021年5月12日解决
添加了文本“两个跨列元素之间仅隔着绝对定位元素时，它们的边距将相互折叠，因为绝对定位元素不会创建列框。”2021年5月12日解决
添加了无障碍访问性考虑部分。APA审查后的请求。
添加了注释和示例，以明确垂直书写模式下列布局的方式。i18n WG审查后的请求。

2019年10月15日的工作草案 (WD)中的更改

添加了文本“跨列元素为其内部的绝对定位框创建包含块，除非跨列元素没有建立包含块，否则包含块链会直接指向多列容器。”2020年10月23日解决
添加了文本“该属性指定内容是否在不紧邻跨列元素的多列行中平衡。”2020年4月29日解决

2018年5月28日的工作草案 (WD)中的更改

删除了非规范性文本“然而，如下所述，设置宽度和列数同时设置的情况很少有意义。” 编辑，2019年9月16日，问题 4291。
添加了段落“跨列元素是块级框，因此两个相邻的跨列元素之间的边距会相互折叠。由于列框建立了新的块格式化上下文，因此列框内元素的边距不会与跨列元素的边距折叠。”2018年10月22日解决，另见问题 2582的解决方案。
对规范进行了澄清，解释了跨列元素是流外的，留下一个强制中断。添加了段落“跨列元素是流外的，留下一个强制中断。这不会影响跨列元素的绘制顺序。”2019年2月28日解决。
将column-gap属性的定义移动到[CSS3-ALIGN]中，并添加了有关多列中的column-gap的具体细节的段落：
“在多列格式化上下文中，column-gap属性的normal的使用值为1em。这确保了在使用初始值时列的可读性。如果列间有列规则，它将出现在间隙的中间。”2019年6月4日解决。
根据Morten Stenshorne在问题2203中的输入，重新措辞了多列模型部分。
删除了column-gap长度-百分比值的风险标记。2019年6月4日解决。
更新了介绍，删除了关于使用表格布局的多列优势的提及，转而引用了多列的独特特性。编辑变更参考了问题3654。
更改了2016年1月7日解决后伪算法部分中添加的句子，改为指“列”而非“轨道”，因为轨道未在本规范中定义。2019年3月13日解决。
对规范中使用的SVG图像进行了更改和澄清。
更改了语法以使用括号范围表示法，以反映对负值/非零值的限制。

2017年10月5日的工作草案 (WD)中的更改

将关于分页媒体的引用更改为指碎片化上下文。2018年4月12日解决。
更改了关于column-fill属性的行：
在连续媒体中，此属性在溢出列中没有任何效果。
更改为：
在连续媒体中，当存在溢出列时，此属性没有任何效果。2018年4月12日解决
添加了一行文本和示例，说明溢出列可以影响多列容器的高度。2018年4月12日解决
用SVG版本替换了HTML模拟示例，因为这些示例不够清楚。问题1087。
将column-gap的normal值更改为1em，而不是UA指定的长度，并建议为1em。2018年4月4日解决。
澄清了负值不被允许，虽然可以指定0值，但使用值将被限制为最小1px。2018年3月14日解决。
澄清了在跨列元素的情况下，内容会在出现在跨列元素之前的所有列中自动平衡。2017年11月9日解决。
添加了澄清和一个额外的示例，说明跨列元素可能低于第一层后代，并且在跨列元素所在的元素上存在的边距、边框和填充将绘制在跨列元素之上。2017年11月8日解决。
更改了句子列线在内联内容层绘制，但位于多列元素中的所有内联内容下方。为列线绘制在多列元素的边框之上。对于可滚动的多列元素，注意虽然多列元素的边框和背景显然不会滚动，但列线需要随着列滚动。2017年11月7日解决。
在“多列模型”部分中，删除了两句话也就是说，列框的行为类似于块级框、表格单元格和内联块框，参见CSS 2.1，第10.1节，第2项CSS21。然而，列框不会为position: fixed或position: absolute的元素建立块容器框。这些句子被一个关于主框的澄清和一个展示abspos元素如何引用多列容器的新示例取代。2017年11月7日解决。
删除了说明“为了指示列中断应该（或不应该）出现的位置，引入了新的关键字值”的句子及后续示例（2017年10月5日发布的工作草案中的示例7），因为多列规范不再引入这些属性。编辑
我们在引用应用多列的元素时，将多列或多列“元素”改为多列或多列“容器”。2017年11月22日解决。
删除了以下示例：“如果将高图像移动到下一页的列中以找到空间，其自然列可能会保持为空。如果是这样，列仍被认为有内容，以决定是否应绘制列规则。”2017年9月7日解决。

2011年4月12日的候选推荐标准 (CR)中的更改。

添加了2016年7月的决议，将轨道尺寸下限更改为与CSS网格规范一致的强制UA指定值。2016年1月7日解决
移除了关于溢出列仅在连续媒体中的限制，声明column-fill对溢出列没有影响。2013年9月解决
添加了关键字balance-all，并展示了其工作原理的示例。2013年9月解决
伪算法已在多次场合下进行了修订。最近一次更改：2013年2月
澄清了属性columns，column-width，column-count“适用于块容器”。2013年2月参考
中断属性已从本规范中移至CSS碎片化模块。
更改了column-fill的措辞，澄清column-fill在分页之前被尊重。2012年1月参考
修订了示例和文本，以澄清边距折叠和跨列元素的处理方式。2013年10月参考
澄清了column-rule-width不会更改列的大小或位置。2013年9月参考
添加了每个跨列元素都会建立单独的BFC，且它们之间的边距会折叠。2011年12月参考
列规则绘制在内联内容层，但位于多列内的所有内联内容下方。2013年2月参考
澄清了column-span即使不在多列中，也会导致元素建立格式化上下文。
列跨距并不总是建立块格式化上下文。
允许column-gap接受<长度百分比>而不仅仅是<长度>。
column-width和column-count适用于块容器，除了表格包装框。
溢出列的内容不会被裁剪。

隐私考虑

多列不会引入新的隐私泄露。

安全考虑

多列不会引入新的安全考虑。

设置容器高度和行长度可能会给视觉或认知障碍人士带来挑战。参见WCAG成功标准1.4.10：重排和WCAG 1.4.8：视觉呈现以了解用户需求。

致谢

本文件基于若干旧的提案以及对旧提案的评论。贡献者包括：

Alex Mogilevsky, Andy Clarke, Anton Prowse, Bert Bos, Björn Höhrmann, Cédric Savarese, Chris Lilley, Chris Wilson, Daniel Glazman and Dave Raggett, David Hyatt, David Singer, David Woolley, Elika Etemad, Giovanni Campagna, Ian Hickson. Joost de Valk, Kevin Lawver, L. David Baron, Markus Mielke, Melinda Grant, Michael Day, Morten Stenshorne, Øyvind Stenhaug, Peter Linss, Peter-Paul Koch, Robert O’Callahan, Robert Stevahn, Sergey Genkin, Shelby Moore, Steve Zilles, Sylvain Galineau, Tantek Çelik, Till Halbach

规范符合性

文档约定

符合性要求通过描述性断言和RFC 2119术语的组合来表达。关键词“MUST”、“MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、“RECOMMENDED”、“MAY”和“OPTIONAL”在本文件的规范部分中应按照RFC 2119中的描述进行解释。但是，为了可读性，这些词在本规范中不以全大写字母出现。

本规范的所有文本都是规范性的，除非明确标记为非规范性的部分、示例和注释。[RFC2119]

本规范中的示例以“例如”引入，或通过 class="example" 与规范文本分开，如下所示：

信息性注释以“注释”开头，并通过 class="note" 与规范文本分开，如下所示：

建议是规范性部分，用以引起特别注意，并通过 <strong class="advisement"> 标示，如下所示： 用户代理必须提供可访问的替代方案。

规范符合性类别

如果样式表中使用了本模块中定义的语法，并且符合通用CSS语法以及本模块中定义的每个特性的个别语法，则该样式表符合本规范。

如果渲染器除了按适当的规范解释样式表外，还能够正确解析并渲染本规范中定义的所有功能，则该渲染器符合本规范。然而，由于设备限制导致的用户代理无法正确渲染文档，并不会使用户代理不符合规范。（例如，用户代理不需要在单色显示器上渲染颜色。）

如果编辑工具编写的样式表语法正确，并符合通用CSS语法及本模块中每个特性的个别语法，并符合本模块中描述的样式表的所有其他符合性要求，则该编辑工具符合本规范。

部分实现

为了让作者能够利用向前兼容的解析规则来分配后备值，CSS渲染器必须将任何无用的at规则、属性、属性值、关键字和其他语法构造视为无效，并适当忽略。尤其是，用户代理不得选择性地忽略不受支持的组件值，同时接受一个多值属性声明中的支持值：如果任何值被视为无效（如不受支持的值必须如此），CSS要求整个声明被忽略。

不稳定和专有功能的实现

非实验性实现

一旦规范达到候选推荐标准阶段，非实验性实现就有可能实现，实施者应发布任何CR级功能的无前缀实现，前提是他们能够证明该功能根据规范已被正确实现。

为了建立和维护CSS在各实现之间的互操作性，CSS工作组要求非实验性CSS渲染器在发布任何CSS功能的无前缀实现之前，向W3C提交实现报告（如果需要，还要提交用于该实现报告的测试用例）。提交给W3C的测试用例需经过CSS工作组的审核和更正。

CR退出标准

为了使本规范提升为提议推荐标准，必须至少有两个独立的、可互操作的实现来支持每个功能。每个功能可由不同的产品实现，不要求所有功能都由单一产品实现。为了本标准的目的，我们定义了以下术语：

CSS 多列布局模块 第一级

摘要

本文档的状态