最后一列高度不一致的本质是内容被自动截断分栏导致视觉割裂，解决核心是控制分栏断点、避免块级元素跨列断裂；通过break-inside: avoid锁定关键元素不跨列，并配合column-fill: balance实现列高均衡。
多列布局（column-count 或 column-width）中最后一列高度不一致，本质是内容被自动截断分栏导致的视觉割裂——尤其是当某列末尾元素（如图片、卡片、段落）被强行跨列打断时。解决核心不是“拉齐高度”，而是**控制分栏断点，避免在不合适的元素内部断裂**，break-inside: avoid 正是为此设计的关键声明。
为什么最后一列看起来“矮”或“错位”？
浏览器按文本流自然分栏，遇到块级元素（如 对不希望被切断的容器添加该声明，强制整个元素落入同一列： 默认 立即学习“前端免费学习笔记（深入）”； 当某些区域必须作为分栏边界（例如章节之间），可用空元素注入分栏提示： 不复杂但容易忽略：真正起效的是组合使用——）时，默认允许其被拆开到不同列中。一旦某个大块元素恰好卡在列底，它的一部分被挤到下一列开头，就会造成前一列“提前结束”，视觉上显得更短，同时破坏内容完整性。用 break-inside: avoid 锁定关键元素不跨列
.card {
break-inside: avoid;
/* 兼容旧版写法（可选） */
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
}display: block（或 flow-root、flex 等非 inline）元素生效；不能加在文字段落（）上直接防断行，需包裹一层容器配合 column-fill: balance 提升列高一致性
column-fill: balance（多列下自动均分内容高度），但若内容总高度无法整除列数，仍可能产生微小差异。确保显式声明：
column-fill: balance; —— 让浏览器尽量均衡分配内容，减少最后一列明显偏短height 或 max-height 在容器上可进一步约束，但慎用，可能引发溢出必要时手动插入分栏控制点
—— 强制在此开始新列 —— 强制在此结束当前列break-inside: avoid 防碎片，column-fill: balance 均匀分布，再辅以语义化 HTML 结构，多列布局就能既整齐又保持内容完整。
