应优先用 display: flow-root 替代浮动清除，用 flex/grid 替代浮动栅格布局，仅图文环绕等原始语义场景保留 float；clear 是脆弱补丁，现代布局应避免。
看浮动是否在撑开父容器高度
如果代码里只为了“让父div有高度”而给子元素加 float: left，那它根本不是在做布局，只是在 hack 文档流。这种场景直接换成 display: flow-root 就能解决，无需任何结构调整。
常见错误现象：div 包着几个 float: left 的卡片，但父容器背景色消失、边框看不见、下方内容上移——这说明你正在用浮动干 BFC 的活。
- 旧写法：
.parent { overflow: hidden; }（可能意外裁剪下拉菜单或阴影） - 现代写法：
.parent { display: flow-root; }（语义准确，无副作用） - 兼容性注意：Chrome 64+ / Firefox 58+ / Safari 15.4+ 都支持，IE 和旧安卓 WebView 不支持
检查是否在模拟栅格或多栏对齐
比如写了一堆 float: left; width: 33.333% 拼三栏，还配 clear: both 控制换行——这已经超出浮动原始语义，属于强行复刻栅格系统。
这类结构基本都能无痛迁移到 display: flex 或 display: grid：
立即学习“前端免费学习笔记（深入）”；
- flex 替代：父容器加
display: flex，子项用flex: 0 0 33.333%（避免flex-grow干扰） - grid 替代：父容器设
display: grid; grid-template-columns: repeat(3, 1fr) - 别忘了响应式：
@media (max-width: 768px) { grid-template-columns: 1fr; }比 media + float 方向切换干净得多
确认是否涉及图文环绕等原始语义场景
如果浮动只出现在 img 上，且伴随 margin 和段落文本，比如：img { float: left; margin-right: 1rem; }——这就是浮动最该待的地方，不建议强行替换成 flex。
原因很简单：flex 容器会让文字变成“块级排列”，失去自然环绕；而 float 在这个场景下仍是语义最准、浏览器行为最可预测的方案。
- 邮件模板（Outlook）、老 CMS 后台、某些嵌入式设备页面仍依赖它
- 若强行用 flex 模拟，需额外包裹文字、控制
line-height、处理断行，得不偿失 - 真正容易被忽略的是：同一个项目里，图文环绕用 float，整体布局用 flex —— 这才是合理混用，不是技术债
排查是否在用 clear 控制非兄弟元素
clear: both 只对“前一个浮动兄弟元素”生效。如果你发现它加在某个元素上没反应，大概率是位置错了：加在浮动元素自己身上？无效；加在浮动元素前面？白加；加在 span 这类 inline 元素上？得先 display: block。
这种脆弱的依赖关系，正是浮动不适合现代布局的核心信号：
- flex/grid 中没有
clear概念，子项排列由容器统一控制 - 一旦看到
clear出现在媒体查询里、或者需要动态 JS 插入清除节点，就该警觉了 - 伪元素清除（
::after { clear: both; }）虽可用，但本质是补丁，不是解法
