不应再用 float 做多列布局，因其本意是文字环绕图片；现代项目应优先使用 flex 或 grid，二者原生支持等高、对齐与响应式重排，仅在需兼容 IE9 及更旧版本时才考虑 float。
float 布局下子元素高度不一致，父容器塌陷怎么办
浮动元素脱离文档流，父容器无法感知子项高度，导致高度为 0 —— 这不是 bug，是 float 的设计行为。解决核心不是“撑开”，而是让父容器重新建立 BFC 或清除浮动影响。
- 给父容器加
overflow: hidden（或auto），触发 BFC，强制包含浮动子项 - 更稳妥的做法是用伪元素清除：在父容器末尾插入
::after，设置content: ""+clear: both - 避免用
手动清浮，冗余 DOM，语义差 - 注意
overflow: hidden在有下拉菜单、弹层等溢出内容时会裁剪，得换方案
多列等高但内容长度不同，纯 float 怎么硬拉齐
float 本身不提供等高机制，所谓“等高”只能靠视觉欺骗或额外控制。强行等高会破坏内容可读性，优先考虑是否真需要——多数场景用 flex 或 grid 更合理。
- 若必须用 float，常见做法是给所有列设固定高度（
height: 300px），但响应式下极易错位或溢出 - 背景图模拟等高：父容器设背景色/图，子列用
min-height保底，靠背景“看起来”一样高 - JS 补偿：遍历列高，取最大值赋给所有列的
min-height，但 SSR 不友好、FOUC 明显、resize 时需重算 - 不推荐用
padding-bottom: 9999px; margin-bottom: -9999px的“负边距 trick”，IE8+ 虽支持，但维护成本高、易和定位冲突
float 多列布局中文字换行错乱、间隙异常
float 元素间存在空白符（空格、换行）会被渲染成 4px 左右间隙；文字在窄列中可能因断字规则或 word-break 缺失导致溢出。
- 列容器写成一行：
- 或给父容器设
font-size: 0，子列再单独设font-size: 14px - 文字溢出列宽时，加
word-wrap: break-word（旧版 IE 用word-break: break-all） - 图片未设
max-width: 100%会导致列宽撑破，尤其响应式环境里必加
现代项目里还该用 float 做多列布局吗
不该。float 的原始语义是“文字环绕图片”，不是布局工具。2015 年后主流浏览器已全面支持 flex 和 grid，二者原生支持等高、对齐、响应式重排。
- flex 布局只需父容器
display: flex，子项默认等高，align-items: stretch是默认值 - grid 更适合复杂二维布局，
grid-template-columns: repeat(3, 1fr)+align-items: start可控性更强 - 保留 float 的唯一合理场景：兼容 IE9 及更老版本（但这类需求现在极少）
- 如果代码里还看到
float: left配合width: 33.333%做三栏，基本意味着技术栈停滞
真正难的不是让三列看起来一样高，而是判断它们是否真的需要一样高——内容长度差异本身就在传递信息。强行拉齐，往往掩盖了结构设计的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
