应坚决弃用 float 做大面积布局，改用 display: flow-root、flex 或 grid；float 在现代布局中已被静默忽略或引发隐蔽问题，且兼容性与可维护性差。
坚决弃用 float 做大面积布局——不是“可以不用”，而是只要涉及容器级结构、响应式栅格、组件排列，float 就不该出现。
当父容器需要自动包裹子项高度时
这是最常见也最容易被误判的场景。一旦你写 overflow: hidden、::after { clear: both } 或反复加 clear: both 来“撑开”父容器，说明你正在用 float 干 BFC 的活。
-
display: flow-root是标准解法，语义准确、无裁剪副作用，Chrome 64+ / Firefox 58+ / Safari 15.4+ 全支持 - 若需兼容 IE 或旧安卓 WebView，应整体迁移到
display: flex，而非继续维护clearfix - 别在
flex容器里留float：浏览器会静默忽略float，但开发者可能误以为它还在起作用，导致justify-content失效或换行异常
当需要响应式多栏/卡片/导航等一维线性排列时
比如三栏列表、水平导航、表单左右分组——这些是 float 曾经的“主战场”，但现在每一条都对应更稳的现代方案。
- 删掉所有
float: left、width: 33.333%、clear: both，给父容器加display: flex和flex-wrap: wrap - 子项用
flex: 0 0 calc(33.333% - 12px)控制宽度，比百分比 + margin 更可靠（避免 box-sizing 漏设导致溢出） - 媒体查询中只需改
flex-direction: column或flex-basis，不用重复处理float方向、clear时机、width重置
当项目已基于 Flex/Grid 构建主布局时
React/Vue 组件库默认用 flex 或 grid 实现栅格系统，此时残留的 float 不是补充，而是冲突源。
-
float在flex容器中被浏览器静默丢弃；在grid容器中被规范明确忽略 - CSS-in-JS 方案（如 Emotion）默认 lint 禁止
float，SSR 渲染下还可能引发首屏高度塌陷，影响滚动定位 - 第三方组件（如老版轮播、弹窗）若内部硬编码
float: left，替换其外层容器为flex后必须检查子项是否仍带该声明——否则渲染结果不可控
真正难处理的不是“怎么清除浮动”，而是当 JS 隐式依赖 offsetLeft 或 getBoundingClientRect() 的计算基准、或无障碍逻辑依赖 HTML 顺序时，float 切换到 flex 会导致视觉没变但行为已偏移——这种问题不会报错，但会在特定设备或缩放比例下突然暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
