box-sizing: border-box 是关键，因多列布局对子项总宽度敏感，默认 content-box 下 width+padding+border 超列宽致溢出；容器及所有子项均需显式设置，且需配合 column-fill: auto 和 break-inside: avoid。
直接改 box-sizing 就能解决大部分多列宽度溢出问题，但必须设在容器和所有子项上，否则无效。
为什么 box-sizing: border-box 是关键
多列布局（column-count 或 column-width）对每个子项的“总宽度”极其敏感。默认 box-sizing: content-box 下，width: 100% + padding: 12px + border: 1px solid = 实际占宽 > 单列可用宽度 → 溢出并跳入下一列。
- 例如：列宽为
300px，子元素设width: 100%; padding: 16px;→ 实际占宽约332px→ 强制换列，视觉错位 - 第三方样式重置（如
normalize.css）可能覆盖该设置，不能依赖全局重置 - 必须显式写在多列容器及其直系子项上：
.columns, .columns > *
浮动元素在多列中必然导致错位
float 和多列布局是互斥的。一旦子项用了 float: left，它就脱离文档流，不再参与列内高度均衡计算——不是“渲染异常”，而是 CSS 规范行为。
- 现象：某列突然变短、内容塌陷到下一列顶部、图文混排断裂
- 检查方法：在 DevTools 中禁用所有
float声明，看错位是否消失 - 替代方案优先用
display: inline-block、display: flex或display: grid - 若必须保留浮动（如 CMS 输出），需人工归位：
width: calc((100% - 2 * <code>column-gap) / N) +clear: both+ 父容器display: block
column-fill: balance 会强行拉平列高，反而加剧溢出感
浏览器默认的 column-fill: balance 在内容不均时，会把短段落“拉伸”填满列高，导致图片或标题被硬性截断、文字断行突兀，看起来像溢出。
- 解决方案：显式加
column-fill: auto，让内容顺序填充，避免人为拉伸 - 配合
break-inside: avoid防止段落在列中被截断（尤其对卡片、列表项） - 注意：IE 不支持
column-fill，但现代项目基本可忽略
真正容易被忽略的是：多列容器本身也要设 box-sizing: border-box。很多人只改子项，结果容器的 padding 或 border 仍会让整列宽度超限——这个细节在调试时最难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
