分栏与分页：内容在哪儿被切开

多栏布局(columns)、打印分页、CSS Regions——它们做的是同一件事：把一条连续的内容流切进一个个碎片容器（fragmentainer：一栏、一页）。切口落在哪，由 CSS Fragmentation(css-break-3)的三个属性控制：break-before / break-after 管「要不要在这个盒子前 / 后强制（或避免）设置切口」，break-inside 管「这个盒子内部许不许被切开」。

下面是一个 column-count: 3 的多栏容器，装着 8 张卡片段落。选中一张卡片，切它的 break-inside / break-before，实时观察它被拦腰切到两栏还是整体搬去下一栏——verdict 用 getClientRects() 实测每张卡片实际落在哪几栏。

1 · 旧名 page-break-* 与打印场景

这组属性的前身是 CSS2 时代只管打印的 page-break-before / page-break-after / page-break-inside。css-break-3 把分页、分栏统一成「fragmentation」之后，属性更名为 break-*，取值也从单一的 page 语境扩展出 column / avoid-column 等。旧拼写并没有删除——浏览器把它们当作 alias 继续解析，老打印样式表照常工作：

• 通用值——auto（默认，允许但不强制）、avoid（页和栏都尽量别在此切）。
• 分栏专用——column（强制另起一栏）、avoid-column（只避栏切口）。
• 打印专用——page（强制另起一页）、avoid-page、left / right（强制起在左 / 右页，书籍装订用）。章节标题 break-before: page、图表 break-inside: avoid，是打印样式表最常用的两条规则。
• avoid 是请求不是命令——当盒子高过一整个 fragmentainer（比一栏 / 一页还高）时，无处可避，浏览器仍会切分。