最直接的判断依据是父容器 height 为 0px 或远小于预期值，因其无法感知脱离文档流的浮动元素；需用开发者工具逐级检查 computed height，并结合 outline 和 display: flow-root 快速定位塌陷层级。
最直接的判断依据是：父容器的 height 在开发者工具中显示为 0px 或远小于预期值——这不是渲染异常，而是浮动元素脱离文档流后，父容器根本“看不见”它们。
怎么看父容器 height 是否为 0px
用 Ctrl+Shift+C（Win）或 Cmd+Shift+C（Mac）点选错位区域中的任意子元素，在 Elements 面板中逐级向上点击父节点，紧盯右侧 Computed 面板里的 height 值：
- 若某个 、
的height是0px或几像素，但内部有float: left/float: right元素，基本锁定问题源头- 再确认该父容器的
overflow是visible（默认值），且display是block—— 这说明它既没触发 BFC，也没做清除- 临时加
outline: 1px solid red到该父容器上，如果红框“断开”而内部浮动子项红框完整延伸到右边缘，就是典型塌陷表现为什么
clear: both加了也没用clear不是对浮动元素生效，而是让「当前元素」避开前面所有同级浮动的影响。加错位置等于白写：- 写在浮动元素自身上（如
.float-item { clear: both; }）→ 只影响自己定位，不反馈给父容器 - 加在父容器上 → 它不是浮动元素的兄弟，
clear对祖先无效 - 清除节点是
display: inline或display: flex→clear只对块级元素起作用 - HTML 中浮动元素后面直接闭合了父容器 → 没地方可清；或者清除节点被
display: none隐藏 → 样式存在但不参与布局
用
outline快速暴露越界元素执行这行代码能瞬间定位真正撑破边界的元素，不依赖浮动逻辑：
javascript:(function(){document.body.innerHTML='<style>*{outline:solid%201px%20red!important;}</style>'+document.body.innerHTML;})()把它存成书签，点击后滚动页面找那个“右边贴死描边”的元素：
- 通常是没设
max-width: 100%的图片、或
- 特别注意
white-space: nowrap容器，或含长英文/数字串且无word-break的段落- 如果多个浮动项并排时出现右侧白边，大概率是 HTML 换行空格被渲染成约 4px 间隙，5 个项就多出 20px+
嵌套浮动时最容易漏掉哪一层
浮动影响只发生在「直接父容器」，浏览器不会自动向上穿透多层去感知。常见错误是只清最外层，结果内层导航栏、菜单项仍塌陷：
- 用开发者工具逐层选中父容器，看
computed height是否为0或明显偏小 - 临时给每一层疑似浮动容器加
display: flow-root，哪一层加了立刻恢复，哪一层就是漏点 - 兼容老浏览器时，伪元素清除必须写在每一层容器自己的 CSS 里：
.container::after { content: ""; display: table; clear: both; }，不能只写在顶层
真正容易被忽略的是：你看到的错位、重叠、白边，往往不是某条样式写错了，而是某一层父容器彻底“失明”——它连自己里面有没有内容都算不出来。定位时别急着改
float或clear，先盯死height: 0px这个信号。 - 特别注意
- 再确认该父容器的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
