columns 是浏览器原生文本分栏机制，自动平衡列高、响应式断行且语义正确；float 是图文环绕工具，用于排版易错位失衡、难响应、需手动干预。
因为 columns 是浏览器专为连续文本流设计的原生分栏机制，而 float 本质是图文环绕工具，强行用于文章排版会破坏语义、错位、失衡、难响应。
columns 自动处理文本断行与列高平衡
浏览器排版引擎直接介入文本流，按 column-width 或 column-count 自动拆分段落、换行、分配内容到各列，并默认启用 column-fill: balance（现代浏览器已普遍支持），让所有列视觉高度尽量一致。float 完全不感知文本流——你得手动切段落、设固定高、调 margin，稍改一个字就可能让右列多出半行空白。
- float 下常见“左列 2 行、右列 4 行”，底部参差不齐
- columns 中即使某段文字略长，也会被自动折行并填入后续列，保持底部对齐
-
break-inside: avoid可防止图片或<h2></h2>被截断在两列之间，float 做不到这点
column-width 比 float + 百分比宽度更可靠地响应式
column-width: 250px 是“最小理想宽度”，浏览器根据容器实际宽度自动计算列数：大屏显示 4 列，小屏缩成 1 列，无需 media query。float 靠 float: left; width: 33.33% 模拟三栏，一旦视口变窄，就会整块换行，变成“两行三列”甚至堆叠成一列，且无法控制换行点。
- columns 在打印样式中也正常工作，float 常因 page-break 规则缺失导致跨页断裂
- 移动端 touch 区域不受影响；float 元素可能因 margin 抖动触发意外滚动
- 不需要
::after { content: ""; display: table; clear: both; }这类清除 hack
columns 对内容结构有隐含要求，用错场景反而更糟
它只对纯文本流有效——<p></p>、<span></span>、<em></em> 等内联或块级但未脱离文档流的元素。一旦插入 position: absolute 元素、用 JS 动态追加 <p></p>、或内部嵌套 display: flex 容器，列平衡立刻失效，内容溢出或卡死。
- 导航栏、侧边栏、卡片列表这些结构性内容，该用
display: grid就别塞进 columns -
width: 100%在 columns 内以 column box 为参考系，不是父容器——容易误判尺寸 - IE9 及更早版本不支持，但当前主流浏览器（Chrome/Firefox/Safari/Edge）均已无前缀支持
真正容易被忽略的是：columns 不是“另一个布局方案”，它是排版引擎对文本流的一次封装。你不是在“布局”，而是在告诉浏览器：“请像印刷杂志那样处理这段文字”。一旦内容不再是线性、静态、无交互的文本，就得退回到 flex 或 grid 手动组织——这不是 columns 的缺陷，而是它设计边界的诚实体现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
