columns是专为连续文本流自动分栏设计的原生机制，float是为块级元素定位的遗留方案；columns自动断行、平衡列高、响应式友好，而float需手动控制、易错位且不自动平衡。
因为 columns 是浏览器原生支持的文本流分栏机制，而 float 是为块级元素定位设计的遗留方案——两者解决的根本不是同一类问题。
columns 专为连续文本流自动分栏而生
它把一段长文本（比如新闻正文、法律条文）当作不可分割的线性内容，由浏览器排版引擎自动断行、分栏、平衡列高。你只需声明 column-width: 250px 或 column-count: 3，其余全交给渲染层处理。
-
column-fill: balance能让各列高度尽量一致，column-gap和column-rule直接控制间距与分隔线 - 支持
break-inside: avoid防止段落、图片被截断，也兼容打印样式 - 响应式友好：
column-width在小屏下会自然退化为单列，无需媒体查询硬切
float 强行模拟多栏会破坏文本语义和排版逻辑
它把每个段落或区块当独立块浮动，完全不感知文本流。你得手动控制每个浮动块的 width、margin、高度，稍一缩放或内容增减，列就错位、堆叠或留白。
- 无法自动平衡列高，常见“左列短、右列长”导致底部参差不齐
-
float: left+width: 33%在视口变窄时大概率换行，变成“两行三列”而非“单列” - 必须用
::after { content: ""; display: table; clear: both; }清除浮动，否则父容器塌陷
column-count 和 column-width 的优先级关系容易误用
二者同时设置时，浏览器优先尊重 column-width，再根据容器宽度推算实际列数；若只设 column-count，列宽会随容器等比拉伸——这在响应式场景下极易导致小屏列宽过窄、字距挤压。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
column-width: 200px; column-gap: 1rem;，让列数自适应 - 避免写死
column-count: 4，除非明确要求固定列数且容器宽度可控 -
columns简写如columns: 200px 3表示“理想宽度 200px，最多 3 列”，但实际仍以宽度为准
现代项目里 columns 的真正限制不在语法，而在内容结构
它假设内容是静态、线性、无交互的纯文本流。一旦插入 position: absolute 元素、用 JS 动态追加段落、或嵌套 flex/grid 子容器，列平衡立刻失效——这时就得退回到 flex 或 grid 手动分栏，而不是怪 columns 不够“智能”。
最容易被忽略的是：多列布局不是通用页面结构工具，它只对“一段可连续分栏的文本”有效；导航栏、侧边栏、卡片列表这些结构型内容，该用 display: grid 就别硬塞进 columns 里。
