父容器height为0px是浮动塌陷最可靠判断依据；用开发者工具查看computed面板中height值，若为0px或远小于内容实际高度，且内部含float子元素，即确认塌陷。
用开发者工具直接看父容器高度是否为 0
浮动元素脱离文档流，父容器高度塌陷是最常见诱因。一旦父容器 height 在 Computed 面板里显示为 0px 或远小于子元素视觉高度，基本可锁定问题根源。
实操建议：
- 在 Elements 面板中选中疑似包裹浮动项的父容器（比如
.card-list、.nav-wrap） - 切到 Styles 面板，临时加
border: 1px solid red，直观确认是否“空壳” - 再切到 Computed 面板，搜
height，重点看数值和来源——若来自auto且值极小，就是塌陷了 - 把父容器的
overflow临时改成visible，如果滚动条消失、内容正常撑开，说明是 BFC + 浮动计算冲突，不是真溢出
检查浮动子元素是否超出父容器右边界
横向滚动条（尤其是右侧白边）常不是因为内容多，而是某个浮动项实际宽度超出了父容器，比如忘了 box-sizing: border-box，或 HTML 换行产生了空白间隙。
实操建议：
- 给父容器加
outline: 1px solid red，滚动页面找哪个子元素的右边缘顶到了 outline 线外 - 在控制台运行
document.body.scrollWidth > window.innerWidth，返回true就确认存在横向溢出 - 逐个禁用子元素的
float，观察白边是否消失，快速定位“肇事”元素 - 检查子元素是否设置了
width: 100%却又带padding或border，没配box-sizing: border-box
验证是否误用了 overflow:hidden 替代清除浮动
overflow: hidden 能让父容器包含浮动，但它是副作用，不是本意。它会裁剪 position: absolute 内容、隐藏 box-shadow、甚至让下拉菜单被截断，同时也不解决滚动需求。
实操建议：
- 如果父容器写了
overflow: hidden却又希望内容可滚动，立刻换成overflow-y: auto或display: flow-root - 把
overflow: hidden改成display: flow-root，效果一样能包裹浮动，但不裁剪、不干扰交互 - 若必须兼容老浏览器（如 IE11），改用伪元素清除：
.parent::after { content: ""; display: table; clear: both; }，确保::after真正作用于父容器本身 - 避免在浮动父容器上直接写
overflow-x: hidden作为兜底——它掩盖问题，不修复布局失控
用 CSS outline 快速暴露越界元素
一行代码就能全局描边，比逐个检查更高效。它不依赖浮动逻辑，只反映真实渲染尺寸，对定位、Flex、Grid 同样有效。
实操建议：
- 在浏览器控制台粘贴执行：
document.head.innerHTML += '<style>*{outline:solid 1px red!important;}</style>' - 滚动页面，找那个右边缘紧贴视口最右、或明显凸出 outline 的元素
- 重点关注图片（没设
max-width: 100%）、<table>、<code><pre class="brush:php;toolbar:false;"></pre>、长英文无换行的<p></p>，它们常是横向溢出元凶 - 这个技巧在响应式调试中尤其有用——某些断点下才出现的白边，靠它一眼定位 真正难处理的不是“有没有浮动”，而是浮动混在现代布局里（比如 Flex 容器内嵌了 float 子项），或者清除逻辑只写在 DOM 末尾却没作用到父容器上。这种场景下，
display: flow-root 和 outline 描边是最稳的两个起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
