多列布局专用于连续文本流分栏，浮动仅适用于块级元素并排或图文环绕；响应式文本分栏用column-width，结构布局用flex/grid，二者不可混用。
多列布局（column-count / column-width）专为**连续文本流**设计，浮动（float）是为**块级元素并排定位**准备的——两者根本不是同一类工具，强行比较“哪个好”容易用错场景。
什么时候该用 columns？
只在你要把一段长文本（比如新闻正文、法律条文、小说章节）自动分栏显示时才用它。浏览器会负责断行、分栏、尽量平衡列高。
- 必须是纯文本或内联内容为主；
img、table等块级元素默认跨列，得加break-inside: avoid才能避免被截断 -
column-width: 250px比column-count: 3更适合响应式，浏览器会按视口宽度自动算出实际列数（最小为 1） - 不能控制某一段文字“固定在第二列顶部”，也不能让两个侧边栏和主内容形成三栏结构——这不是它的职责
什么时候该用 float？
仅限老项目兼容或极简图文环绕场景，比如让一张图左浮、文字绕排；或者 legacy CMS 输出的不可改 HTML 结构里硬凑两栏。
- 浮动元素脱离文档流，父容器高度会塌陷，必须手动清除：
overflow: hidden或伪元素::after { content: ""; display: table; clear: both; } - 无法响应式对齐：
float: left+width: 30%在小屏上大概率换行错乱，且无法垂直居中 - 现代浏览器中，
float已被标记为“legacy layout mode”，MDN 明确建议用display: flex或display: grid替代
为什么别用浮动模拟多列文本效果？
因为浮动不处理文本断行逻辑：你得手动切段落、控制每个浮动块的高度、手动调列间距，稍一缩放就错位；而 columns 是浏览器原生支持的排版引擎，连 hyphenation（连字符）都能配合生效。
- 浮动做文本分栏 → 列高不一致、换行点不可控、缩放后列数突变、打印样式失效
-
columns做文本分栏 → 自动平衡、支持column-fill: balance、可配column-rule分隔线、打印友好 - 想实现“左侧导航 + 右侧文章”这种结构？直接用
display: grid或display: flex，别碰float也别硬套columns
真正容易被忽略的是：多列布局对内容语义有隐含要求——它假设内容是线性、无交互、无需 JS 动态操作 DOM 的静态文本流。一旦你往里面塞 position: absolute 元素、或用 JS 插入新段落，列平衡就立刻失效。这时候就得退回到 flex/grid + 手动分栏逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
