清除浮动失败最常见原因是父元素未形成BFC，导致高度塌陷；需检查其是否生效设置了display:flow-root、overflow:hidden等BFC触发属性，并用开发者工具验证computed display值及盒模型高度。
清除浮动失败，最常见原因是父元素没有形成BFC（块级格式化上下文），导致无法包含浮动子元素，从而高度塌陷。快速定位问题，关键就是检查父级是否真正触发了BFC。
看父元素是否设置了BFC触发属性
以下任一CSS声明可触发BFC，但必须**生效且未被覆盖**：
- display: flow-root —— 最推荐，专为解决此类问题设计，无副作用
-
overflow: hidden / auto / scroll —— 常用但需注意：若子元素有
position: absolute或transform等超出父边界的情况，会被裁剪 - float: left / right —— 父元素自身浮动，虽能形成BFC，但会脱离文档流，影响后续布局
- position: absolute / fixed —— 父元素脱离文档流，通常不适用于普通容器
- contain: layout 或 display: table-cell / table-caption —— 较少用，兼容性或语义性受限
用开发者工具快速验证BFC是否生效
在浏览器中打开开发者工具（F12），选中父元素，查看“Computed”面板中的 display 值：
- 若显示为
flow-root、table-cell等BFC类型，说明已触发 - 若显示为
block且没其他BFC属性，则未形成BFC - 检查是否有样式被
!important覆盖，或被更高级选择器重置（比如重设了overflow: visible）
排除伪元素清除法失效的典型原因
使用::after清除浮动时失败，往往不是写法错，而是细节被忽略：
立即学习“前端免费学习笔记（深入）”；
- 父元素缺少
zoom: 1（仅IE6/7需要，现代项目可忽略） -
::after未设置display: block（或table），导致clear无效 - 父元素设置了
height: 0、font-size: 0或line-height: 0，使伪元素高度坍缩 - CSS类名未正确加到父元素上，或存在拼写错误（如
clearfix写成clear-fix）
辅助判断：父元素高度是否真的塌陷
直接在开发者工具中选中父元素，观察右侧“Layout”或“Box Model”面板：
- 若
height显示为0px或远小于预期，基本确认塌陷 - 鼠标悬停父元素时，高亮区域是否只覆盖边框、不包裹浮动子元素？是则BFC未生效
- 临时添加
border: 1px solid red到父元素，直观查看实际渲染范围
