父容器 height 为 0px 是因浮动元素脱离文档流导致塌陷；可通过 display: flow-root 触发 BFC 解决，兼容现代浏览器且无副作用。
父容器 height 为 0px？先确认是否塌陷
浮动元素脱离文档流，父容器计算高度时直接忽略它们——这不是 bug，是规范行为。你看到背景色没了、边框缩成一条线、后续元素“钻”进浮动区域，基本就是塌陷了。
打开开发者工具，选中父容器，在 Computed 面板里直接搜 height：如果值是 0px 或远小于预期，就坐实了。再切到 Layout 面板，勾选 Show box model，看 content 区域是否真的压扁了。
- 临时加
border: 1px solid red到父容器，若只看到顶部细线或无反应，就是塌陷 - 鼠标悬停浮动子元素，看
:hover是否触发——能触发，说明它在，只是父容器没高度 - 别急着加
clear，先解决“包不住”的问题，否则所有清除都是徒劳
display: flow-root 能不能用？优先试这个
display: flow-root 是现代浏览器（Chrome 64+/Firefox 58+/Safari 15.4+）专为解决浮动塌陷设计的 BFC 触发方式，一行代码，零副作用，不裁剪 box-shadow、不干扰 position: absolute 子项。
在父容器样式里直接写：display: flow-root。如果生效，Computed 面板里 display 值会变成 flow-root，且 height 立刻恢复正常。
立即学习“前端免费学习笔记（深入）”；
- 不要和
overflow: hidden混用——后者会意外裁剪溢出内容，排查时容易漏掉 - 如果项目需兼容 IE11，改用伪元素
.clearfix::after，但必须带content: ""和display: table - 父容器若已是
display: flex或display: grid，float本身已被忽略，此时加flow-root无效，应删掉浮动相关样式
clear: both 加在哪？检查兄弟元素是否真“块级”且“紧邻”
clear 不是作用于浮动元素自身，而是告诉“下一个非浮动的块级兄弟元素”：你得从浮动下方开始布局。很多人把 clear: both 写在浮动项内部，或加在 span 上，结果毫无反应。
在 Elements 面板里确认三点：
- 浮动元素后面是否有**紧邻的、未设
float的块级元素**（比如<p>、<div>）？没有就无处可清 - 那个兄弟元素的
Computed样式里，clear值是否为both？不是说明被覆盖或没生效 - 该元素是否被设为
display: inline或inline-block？clear对非块级元素无效
结构不支持插 clear 元素时，直接给父容器加 display: flow-root，比硬塞空 <div class="clear"></div> 更干净。
浮动元素“看不见”或“点不到”？查遮挡和层叠上下文
浮动元素没消失，只是被盖住了或事件被拦截了。常见于：position: relative 的兄弟容器自动创建新层叠上下文，层级高于浮动流；或祖先节点设了 opacity: 0.99、transform、will-change，导致子元素 z-index 失效。
用开发者工具选中目标元素，查 Computed 面板里的 pointer-events、visibility、opacity；再看任意祖先是否触发了新层叠上下文（transform、opacity < 1、will-change）。
- 临时加
outline: 2px solid red，看高亮是否和视觉位置一致 - 运行
console.log($0.getBoundingClientRect())（$0是当前选中元素），对比返回坐标和实际点击位置 - 伪元素清除失效时，展开父容器的
::after，确认它尺寸非零、且没被display: none或opacity: 0隐藏
浮动问题本身不复杂，但容易嵌套传导——一层没清，错乱就往下传。调试时不靠猜，直接看 computed height，一层一层点进去，哪层塌了就清哪层。别指望一个 clearfix 解决全部，也别在新代码里还用 float 做主布局。
