最直接有效的调试方式是临时加边框和背景色使浮动元素显形，重点检查父容器是否塌陷、文字环绕错位，并用clear测试div验证清除效果。
遇到浮动导致的布局破碎，最直接有效的调试方式就是临时加边框+背景色，让所有浮动元素“显形”，一眼看出谁脱标、谁重叠、谁没被包裹。
给浮动元素加视觉标记
在开发者工具的控制台中快速执行以下代码，或临时加到样式表末尾：
* { outline: 1px dashed #f00 !important; }或者更精准地只标记浮动元素：
[style*="float"], [class*="float"], .float-left, .float-right, .clearfix * { border: 1px solid #00f !important; background-color: rgba(0,100,255,0.1) !important; }这样能立刻暴露哪些元素实际在浮动、是否意外继承了 float、有没有遗漏清除。
立即学习“前端免费学习笔记（深入）”；
重点检查父容器是否塌陷
如果浮动子元素的父盒子高度为 0 或明显变矮，说明发生了高度塌陷。此时观察：
- 父元素是否没设 height，又没开启 BFC（比如 overflow: hidden / auto / scroll）
- 父元素是否漏写了 clearfix 类，或伪元素 ::after 没生效（检查 content 是否为空、display 是否为 block）
- 浮动子元素是否被 display: none / visibility: hidden 隐藏，但 still floats（仍会触发塌陷）
排查文字环绕与错位
浮动常用于图文混排，但容易造成文字挤到错误位置。调试时注意：
- 文字是否意外被浮动块“推开”而留出大片空白
- 相邻段落是否因未 clear 而贴着浮动元素底部对齐（用 clear: both 临时加在段落前验证）
- 浮动图片宽高是否超出父容器，导致换行错乱（可加 max-width: 100% 防溢出）
快速验证清除是否生效
在疑似该清浮动的位置后，临时插入一个测试 div：
<div style="clear:both; height:2px; background:#0a0;"></div>如果下方内容恢复正常换行，说明这里确实需要清除；再回退替换为语义化方案（如伪元素或 overflow:hidden）。
基本上就这些。不复杂但容易忽略——边框一加，90% 的浮动布局问题当场定位。
