Chrome 120+ Layout面板可可视化浮动元素：勾选“Show layout bounds”和“Show floating elements”，浅蓝色虚线框即未清除的浮动元素；需确认父容器真正清除而非仅视觉正常，可用getComputedStyle验证，并在打印/响应式场景中专项检查。
用 Chrome DevTools 的「Layout」面板直接看浮动边界
浮动元素脱离文档流后，父容器高度塌陷是典型表现，但光靠肉眼很难定位哪个 div 没清浮动。Chrome 120+ 的 Layout 面板能可视化显示浮动影响范围：右键目标元素 → 「Inspect」→ 右侧「Layout」标签 → 勾选「Show layout bounds」和「Show floating elements」。被标为浅蓝色虚线框的，就是正在浮动且未被清除的元素。
注意：float: left 或 float: right 元素只有在未被 clear 且父容器未触发 BFC 时才会显示为浮动状态；如果父容器用了 overflow: hidden 或 display: flow-root，它可能不显示——这不是工具失效，而是浮动已被 BFC 隔离，问题已“掩盖”而非“解决”。
检查父容器是否真的清除了浮动，而不是仅视觉上“看起来正常”
常见误判是看到页面没错位就认为没问题，但隐藏的浮动仍可能影响后续兄弟元素或打印样式。重点检查三类清浮动方式的实际效果：
-
::after伪元素方案（如.clearfix::after { content: ""; display: table; clear: both; }）必须作用于**浮动子元素的直接父容器**，挂错层级等于没写 -
clear: both元素必须紧跟在浮动元素之后、在同一块级上下文中，position: absolute或display: flex的容器里加clear无效 -
overflow: hidden类方案在父容器有padding或border时可能意外裁剪内容，不是所有场景都安全
用 getComputedStyle 在控制台快速验证浮动状态
在 Console 中执行：getComputedStyle(document.querySelector('.target')).float，返回 "left"、"right" 或 "none"。比肉眼判断可靠，尤其适合动态插入的 DOM 或 CSS-in-JS 场景。
立即学习“前端免费学习笔记（深入）”；
批量检测可运行这段脚本：
document.querySelectorAll('*').forEach(el => {
const f = getComputedStyle(el).float;
if (f !== 'none') console.log('浮动元素:', el, 'float:', f);
});
⚠️ 注意：该方法查不到已被 clear 的浮动元素，只反映当前计算值；若元素被 JS 动态移除了 float 但未重排布局，结果可能滞后。
浮动未清除导致的连锁问题往往出现在打印样式或缩放后
很多浮动问题在常规浏览下“隐身”，直到用户点击打印预览或把浏览器缩放到 125% 以上才暴露：文字换行错乱、侧边栏覆盖正文、分页截断异常。这是因为浮动元素的宽度计算依赖视口尺寸，而清除浮动的本质是让父容器重新包裹所有子元素——这个包裹行为在响应式或媒体查询中极易被忽略。
建议在 @media print 和 @media (min-width: ...) 规则里单独检查浮动父容器是否仍需要 display: flow-root 或 clear，不要默认复用桌面端的清除逻辑。
