真正有效的做法是先识别浮动是否必要再选择性保留或替换，优先用BFC方案（如display:flow-root）包容浮动而非clear补漏，清除浮动本身不是目的，恢复布局可控性才是。
直接用 float 配合 clear 并不能“解决”遗留问题，而是临时绕过或掩盖它。真正有效的做法是：先识别浮动是否还在承担必要功能，再选择性保留或系统性替换——清除浮动本身不是目的，恢复布局可控性才是。
先判断浮动是否真有必要保留
很多旧项目里的 float 其实已无实际布局职责：
- 纯图文环绕（如文章中图片右浮、文字左绕）——可保留，float 仍是语义最准确的方案
- 用 float + width 模拟两栏/三栏布局（如左菜单+右内容）——应替换为 flex 或 grid，它们天然撑高、响应式强、无需清除逻辑
- 靠 float + margin 实现间隙或对齐——必须替换，这类写法极易因字体加载、缩放、zoom 触发重排错位
若需保留浮动，优先用 BFC 方案“包容”，而非用 clear “补漏”
clear 属性只控制单个元素位置，不修复父容器塌陷。真正起作用的是让父容器“重新感知”浮动子项，即触发 BFC：
- display: flow-root（推荐）：现代标准，专为此设计，无溢出截断、无副作用，Chrome 64+/Firefox 58+ 支持
- overflow: hidden / auto：兼容性好，但可能意外隐藏 box-shadow、下拉菜单、transform 位移部分
- 避免给父容器设
clear: both：clear 对父级无效，属常见误用
若必须用 clear，只在明确需要“换行定位”的地方加
clear 不是“清浮动开关”，它的作用是让当前元素避开指定方向的浮动区域：
立即学习“前端免费学习笔记（深入）”；
- 导航栏里左 logo + 右菜单后，想让主内容从新行开始？加
clear: both到主内容块上 —— 有效且合理 - 浮动菜单下方直接跟一个普通
<div>？不用加 clear，块级元素默认自动避开浮动区 - 在浮动子项末尾硬塞
<div style="clear:both"></div>？冗余 DOM，应改用伪元素
伪元素清除法（clearfix）仍是兼容场景下的实用底线
当需支持 IE11 或老版本安卓浏览器时，可用标准 clearfix：
.clearfix::after { content: ""; display: table; clear: both; }
注意：display: table 比 block 更稳妥，能可靠触发 BFC，且兼容 IE8+；content 不可省略，否则伪元素不渲染。
