float 不该用于现代布局，仅适用于图文环绕、极老IE兼容或第三方富文本等极少数场景；应优先用 display: flex 或 grid 替代，并用 display: flow-root 临时兜底浮动塌陷问题。
浮动还在用？先看它是不是真必要
绝大多数生产项目里，float不该出现在布局代码中——它不是为布局设计的，只是被“借”来凑合用。现在还写 float: left 做导航栏、侧边栏或卡片流，等于主动给自己加清除逻辑、塌陷修复、换行错位这些负担。
真正该保留 float 的场景极少：
- 新闻正文里图片左浮、文字自然环绕（
shape-outside配合时更可控） - 维护 IE8–9 的政企老系统（2026 年这类需求已趋近于零）
- 第三方富文本编辑器输出的 HTML，你没法改结构，只能靠
.clearfix补救
Flexbox 替代 float：删代码比写代码更重要
迁移不是“加个 display: flex 就完事”，而是系统性清理：
- 删掉所有子元素上的
float、clear、靠margin模拟间距的 hack - 删掉父容器上所有
overflow: hidden、::after.clearfix、zoom: 1这类补丁 - 把对齐逻辑从“每个子项自己设”收归到容器统一控制（
justify-content/align-items）
常见翻车点：
立即学习“前端免费学习笔记（深入）”；
- 忘了加
flex-wrap: wrap，结果小屏下子项溢出容器，以为是“flex 不换行” - 子项写了
width: 33.33%还留margin-right，和flex: 1冲突导致宽度计算错乱 - 图文混排时没调
align-items: flex-start，图片被拉伸、文字基线飘移
哪些地方仍可能触发 float 相关 bug
即使整体用了 Flex，老代码残留或第三方组件仍可能暗藏风险：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
float元素 +position: absolute子元素：后者脱离文档流后，常因父级高度塌陷而定位偏移 - 富文本渲染区域（如
contenteditable）内嵌的img默认带float，若未重置，会撑不开父容器 - 某些 UI 库（如旧版 Bootstrap 3）的栅格类名（
.col-xs-4）底层仍依赖float，混用 Flex 容器时需注意层级隔离
这时别硬改库源码，优先用 display: flow-root 临时兜底——它专为解决浮动塌陷而生，不裁剪阴影、不下拉菜单、不触发重绘异常。
Grid 更适合二维布局，别硬塞进一维场景
如果你在写“侧边栏 + 主内容 + 底部通栏”或“响应式卡片网格”，display: grid 不是“更好”，而是“唯一合理选择”。它不处理浮动，也不模拟浮动——它直接定义行列关系。
实用底线：
- 三列自适应网格？用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，别再写媒体查询堆砌float类 - 固定侧边栏？
grid-template-areas一行定义区域，HTML 结构完全不动 - 间距统一？用
gap，不是靠margin拼，避免外边距合并和清除逻辑
注意：gap 在旧版 Safari 有渲染 bug，但 flex-gap 更稳；所以按钮组、表单项这种一维排列，优先选 Flex，别为了“用 Grid”而用 Grid。
最易被忽略的是：现代浏览器中，float 在 display: flex 或 display: grid 容器里直接失效——但开发者常误以为它还能叠加生效，结果调试半天发现样式根本没 applied。
