多列布局适用于文本分栏排版，浮动用于早期左右块级布局；前者用column-count/column-width自动分栏，后者需float+清除浮动，现代推荐flex/grid替代浮动。
CSS 多列布局和浮动左右布局是两种不同场景下的布局方案：多列布局（column-count / column-width）适用于**文本内容分栏排版**，比如新闻、文章；而浮动（float）实现左右布局则属于**早期的块级元素横向排列方式**，常用于侧边栏+主内容的经典结构。两者目的不同，不可混用，但都值得理解其适用边界和写法要点。
多列布局：适合长文本自动分栏
使用 column-count 或 column-width 可让容器内文字自动分成多列，浏览器负责断行、分栏、平衡列高。它不改变 DOM 顺序，也不影响其他元素流布局。
- 基础写法：
.article { column-count: 3; column-gap: 20px; column-rule: 1px solid #eee; } - 响应式建议：用
column-width更灵活，如column-width: 250px，浏览器会尽可能按宽度分列，最小列数为 1 - 注意点：浮动、绝对定位、
inline元素在多列中行为受限；图片/表格等块级元素默认跨列显示，可用break-inside: avoid防止被截断
浮动左右布局：主内容 + 侧边栏经典结构
通过 float: left 和 float: right 让两个块级元素并排，需注意清除浮动和宽度控制，否则易出现布局塌陷或换行。
- 典型结构示例：
#main { float: left; width: 70%; }
#sidebar { float: right; width: 30%; } - 必须加清除浮动（如在父容器末尾加
<div style="clear:both"></div>），或对父容器设置overflow: hidden/display: flow-root - 现代替代方案：推荐用
flex或grid替代浮动做左右布局，更稳定、语义清晰、响应式友好
为什么不推荐用浮动做多列布局？
浮动本意是让文字环绕图片，强行用于多列会导致诸多问题：
立即学习“前端免费学习笔记（深入）”；
- 需要手动计算每列宽度，且总和不能超 100%，稍有误差就换行
- 高度不一致时，后续元素会被“卡住”，需频繁清除浮动
- 无法自动平衡列高，内容多的列会明显拉长，视觉失衡
- 响应式适配困难，媒体查询中要反复重设浮动和宽度
简单对比总结
若目标是「把一篇长文章分成三栏显示」→ 用 column-count；
若目标是「左侧放主要内容、右侧放广告或目录」→ 用 flex（首选）或 float（兼容老浏览器时）；
不要用浮动去模拟多列文本效果，也不要用多列属性去布局导航+侧边栏——选对工具，事半功倍。
