浮动导致父容器高度塌陷可直接通过开发者工具Computed面板查看height是否异常小（如0px），并确认子元素float值及是否视觉溢出；::after伪元素清除浮动更可靠，推荐使用.clearfix::after{content:"";display:table;clear:both}。
浮动元素导致父容器高度塌陷怎么一眼看出来
直接在浏览器里打开开发者工具，选中疑似有问题的父容器（比如一个 <div class="wrapper">），看右侧“Computed”面板里的 <code>height 值是否异常小（比如 0px 或 2px），同时检查其子元素的 float 计算值是不是 left 或 right。这时候再切到“Elements”面板，观察子元素是否明显“飘”出了父容器边界——它们在视觉上存在，但在文档流中已脱离，父容器就“感知不到”它们了。
用 clear 和 ::after 清除浮动哪个更可靠
::after 伪元素方案是当前最通用、副作用最小的做法；clear 单独加在某个兄弟元素上只治标，且依赖 DOM 顺序，容易漏掉或错位。推荐用这个片段：
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后给浮动元素的父容器加上 class="clearfix"。注意三点：
-
content: ""必须写，否则伪元素不渲染 - 不能用
display: block，得用table或block配合clear，但table兼容性更稳（IE8+） - 如果父容器本身设置了
zoom: 1（IE hack），可保留，但现代项目中优先用::after
审查元素时发现浮动没生效，可能是哪些原因
常见干扰项比想象中多，重点排查以下几类：
立即学习“前端免费学习笔记（深入）”；
- 该元素被设置了
display: flex或display: grid—— 这两种布局下float完全无效，会忽略 - CSS 优先级问题：有更高权重的规则把
float覆盖掉了，比如另一个.item { float: none; } - 父容器设置了
overflow: hidden或auto，虽能“包住”浮动子元素，但这是借 overflow 触发 BFC 实现的间接效果，并非浮动本身生效了 - 元素本身是
inline元素（如<span></span>），而float对部分不可替换 inline 元素支持不稳定，建议显式设display: block
现代项目里还该用 float 布局吗
绝大多数场景不该。CSS Grid 和 Flexbox 已覆盖 float 的核心用途（多栏、图文环绕除外）。但现实是：老项目维护、邮件模板兼容性、或者需要兼容 IE9 及以下时，float 仍可能出现在代码里。此时排查的关键不是“怎么让它更好用”，而是“它为什么在这里还没被替掉”。真正容易被忽略的是：浮动影响的是整个文档流，哪怕只在一个局部模块使用，也可能意外撑开/压缩远端其他区块的高度或位置——这种跨区域副作用，在审查元素时不会高亮，只能靠手动折叠/展开相邻容器逐个验证。
