不推荐用float实现多列布局，因其本意是图文环绕，强行用于分栏会导致父容器塌陷、列间内容无法平衡、响应式断点难控；现代应使用column-count等CSS多列模块。
float实现多列布局为什么现在不推荐
因为float本意是让文字环绕图片，不是为多列内容流设计的。强行用float做报纸式多列，会立刻遇到三个硬伤：父容器高度塌陷、列间无法自动平衡内容、响应式断点极难控制。现代浏览器早支持column-count，它才是专为这个场景造的。
column-count + column-gap 是最直接的替代方案
用 CSS 多列模块能一行代码搞定报纸式分栏，且天然支持内容均匀分布、跨列标题、断行控制：
-
column-count: 3指定列数，内容自动从上到下、从左到右填满 -
column-gap: 2rem控制列间距，别用margin或padding模拟 - 标题跨列用
column-span: all（仅对h1–h6和div等块级元素生效） - 避免在列内用
float或position: absolute，会破坏列流
article {
column-count: 3;
column-gap: 1.5rem;
}
article h2 {
column-span: all;
break-before: avoid;
}float多列还能用吗？只在老项目兼容时被动处理
如果你必须维护一个还在用float拼三栏的老页面，注意这些实际卡点：
- 每列必须设固定
width（比如33.333%），但小数精度会导致最后一列换行 - 必须给父容器加
overflow: hidden或::after清除浮动，否则高度为0 -
float列内margin-bottom不会触发相邻列的重排，视觉错位很常见 - 移动端想改成单列？
@media里不仅要改float，还得重置width和clear，极易漏配
column-* 属性的兼容性和边界行为
column-count在 Chrome 50+、Firefox 13+、Safari 10.1+、Edge 17+ 都稳定支持，iOS Safari 10.3起也没问题。真正要盯住的是两个细节：
立即学习“前端免费学习笔记（深入）”；
- 内容过少时，某些旧版 Safari 会把列宽压到最小值以下，加
column-width: 200px兜底比只靠count更稳 -
break-inside: avoid对flex或grid子项无效，想防止段落被切开，得作用在p或section上 - 打印样式表里多列默认失效，需要显式加
@media print重定义
用float硬凑多列，就像拿螺丝刀拧螺母——不是不行，但拧完手疼，还容易滑丝。真要还原报纸质感，重点不在“怎么让盒子飘起来”，而在“怎么让文字自己分栏”。
