清除浮动后父容器底部空白间隙的根源在于清除节点自身“隐形增高”、父容器未形成BFC导致塌陷，以及HTML文本节点干扰；根本解法是改用flex或grid布局。
清除浮动后父容器底部仍有空白间隙，不是清除失效，而是你清除的对象和方式没对上——clear 本身不修复塌陷，只控制后续元素位置；真正该盯住的是父容器是否形成了 BFC，以及清除节点自身是否引入了新高度。
检查清除节点是不是“隐形增高”的块级元素
用 clear: both 的空 <div> 放在浮动元素后面，看似干净，但它仍是文档流中的块级节点：浏览器会按默认样式给它 <code>margin-top、margin-bottom 和继承的 line-height，尤其在未重置的环境下，这个“看不见”的节点可能自带 1em 高度。
- 在开发者工具中选中那个清除元素，看 computed 样式里的
height、margin-bottom、line-height是否非零 - 临时加
margin: 0; height: 0; font-size: 0; line-height: 0;，如果间隙消失，就确认是它在撑高 - 更稳妥写法：
<div class="clearfix" style="clear: both; height: 0; overflow: hidden;"></div>
确认父容器是否真被“撑开”，还是只是视觉错觉
清除浮动 ≠ 父容器自动获得高度。如果你只靠 clear 而没触发 BFC，父容器依然塌陷，底部空白其实是后续兄弟元素从“塌陷后的 0 高度起点”开始渲染造成的错位，不是父容器自己有空隙。
- 用开发者工具选中父容器，看 computed
height是不是仍为0px或远小于预期 - 给父容器加个
background: red;，如果背景色没显示，说明它确实没高度——这时clear再多也没用 - 正确解法是让父容器形成 BFC：
display: flow-root（推荐）、overflow: hidden（注意裁剪风险）或伪元素::after+clear: both
排查 HTML 中隐藏的文本节点干扰
清除节点前后若有换行、空格或注释，它们会被解析为匿名文本节点，参与行内格式化上下文（IFC），再叠加上父容器的 font-size 和 line-height，就能撑出几像素到几十像素不等的“幽灵高度”。
立即学习“前端免费学习笔记（深入）”；
- 把清除节点写成紧贴前一个浮动元素：
<div class="float"></div> <div style="clear:both"></div>，中间不留空格或换行 - 或者用
display: contents包裹清除节点（现代浏览器支持），让它不生成盒模型 - 临时给父容器设
font-size: 0，若间隙消失，就坐实是文本节点惹的祸（但别长期用，记得子元素重置字号）
最常被忽略的一点：清除浮动这件事，本质是在补救一个已过时的布局模型。只要还在用 float 做结构，你就得持续面对塌陷、基线、空格、行高等一连串连锁反应——不是某条 CSS 写错了，而是整套机制在强撑。真正省心的收尾动作，是把那几行 float 换成 display: flex 或 grid，间隙问题自然归零。
