用 display: grid 或 display: flex 替代 float 是当前最可靠、可维护性最强的方案；column-count 仅适用于纯文本流分栏，无法控制单个栏目内容。
直接说结论：用 display: grid 或 display: flex 替代老式 float + clear，是当前最可靠、可维护性最强的方案；column-count 只适用于纯文本流分栏，不能控制单个栏目内容。
为什么别再用 float 做多列布局
浮动（float）本意是让文字环绕图片，不是为页面结构设计的。强行用它做四列布局，会立刻遇到这些现实问题：
- 父容器高度塌陷——必须加
overflow: hidden或伪元素::after清除浮动，否则后续元素错位 - 列宽用百分比时，小数像素四舍五入导致最后一列掉行（比如 25% × 4 在某些分辨率下实际总和 ≠ 100%）
- 响应式切换列数极其麻烦，要写一堆媒体查询重置
float和width -
float元素脱离文档流，无法用align-items垂直对齐，也无法用gap控制间距
用 display: grid 实现可控多列（推荐用于固定/自适应栏目）
Grid 是二维布局，适合明确列数、列宽、间距、甚至跨列的场景，比如电商商品网格、仪表盘卡片组。
示例：四列等宽、带间隙、自动换行
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
-
repeat(auto-fit, ...)让浏览器根据容器宽度自动计算能放几列，最小每列 250px，最大均分剩余空间 - 不用写死
grid-template-columns: 1fr 1fr 1fr 1fr，避免小屏下溢出或大屏下留白 - 所有子元素（
.grid-item）默认按顺序填入，无需额外 class 控制顺序 - 兼容性：Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+，基本覆盖全部现代环境
用 display: flex 实现一维多列（推荐用于侧边栏+主内容等线性结构）
Flex 更轻量，适合左右/上下两到三栏、其中一栏固定宽度、其余自适应的常见布局。
示例：左栏 240px 固定，右栏占满剩余空间
.flex-container {
display: flex;
}
.sidebar {
width: 240px;
flex-shrink: 0; /* 防止被压缩 */
}
.main-content {
flex: 1; /* 占据所有剩余空间 */
}
-
flex-shrink: 0必须加，否则小屏下左栏会被压缩变形 - 如果需要三栏（左固定 + 中自适应 + 右固定），直接给中项设
flex: 1，左右设具体width即可 - 注意：Flex 是单向排列，想实现“两行两列”这种二维效果，得配合
flex-wrap: wrap+ 宽度控制，不如 Grid 直观
column-count 只适合长文本，别拿来布局 div
column-count 看起来像“分栏”，但它本质是把一段连续文本切成多列显示，**不改变 DOM 结构，也不影响子元素定位**。
- 如果你对一个
<div> 设置 <code>column-count: 3，里面的四个<p></p>会被打散、跨列分布，无法保证第 1 个<p></p>一定在第 1 列顶部 - 无法设置每列背景色、边框、内边距等独立样式
- 子元素若用了
position: absolute或transform，行为不可预测 - 真正适用场景：新闻正文、法律条文、百科段落这类纯文本排版
容易被忽略的一点：当内容高度差异很大时，Grid 和 Flex 的列高默认不一致（比如一列有 10 行文字，另一列只有 2 行），如需视觉上“等高”，得统一设 align-items: stretch（Flex 默认就是）或 align-items: start（Grid 默认），而不是靠 JS 计算高度。
