清除浮动后父容器底部空白间隙的根源在于清除节点自身“隐形增高”、父容器未形成BFC导致塌陷，以及HTML文本节点干扰；根本解法是改用flex或grid布局。

清除浮动后父容器底部仍有空白间隙，不是清除失效，而是你清除的对象和方式没对上——clear 本身不修复塌陷，只控制后续元素位置；真正该盯住的是父容器是否形成了 BFC，以及清除节点自身是否引入了新高度。

检查清除节点是不是“隐形增高”的块级元素

用 clear: both 的空

放在浮动元素后面，看似干净，但它仍是文档流中的块级节点：浏览器会按默认样式给它 margin-top、margin-bottom 和继承的 line-height，尤其在未重置的环境下，这个“看不见”的节点可能自带 1em 高度。

• 在开发者工具中选中那个清除元素，看 computed 样式里的 height、margin-bottom、line-height 是否非零
• 临时加 margin: 0; height: 0; font-size: 0; line-height: 0;，如果间隙消失，就确认是它在撑高
• 更稳妥写法：

确认父容器是否真被“撑开”，还是只是视觉错觉

清除浮动 ≠ 父容器自动获得高度。如果你只靠 clear 而没触发 BFC，父容器依然塌陷，底部空白其实是后续兄弟元素从“塌陷后的 0 高度起点”开始渲染造成的错位，不是父容器自己有空隙。

• 用开发者工具选中父容器，看 computed height 是不是仍为 0px 或远小于预期
• 给父容器加个 background: red;，如果背景色没显示，说明它确实没高度——这时 clear 再多也没用
• 正确解法是让父容器形成 BFC：display: flow-root（推荐）、overflow: hidden（注意裁剪风险）或伪元素 ::after + clear: both

排查 HTML 中隐藏的文本节点干扰

清除节点前后若有换行、空格或注释，它们会被解析为匿名文本节点，参与行内格式化上下文（IFC），再叠加上父容器的 font-size 和 line-height，就能撑出几像素到几十像素不等的“幽灵高度”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 把清除节点写成紧贴前一个浮动元素：
  ，中间不留空格或换行
• 或者用 display: contents 包裹清除节点（现代浏览器支持），让它不生成盒模型
• 临时给父容器设 font-size: 0，若间隙消失，就坐实是文本节点惹的祸（但别长期用，记得子元素重置字号）

最常被忽略的一点：清除浮动这件事，本质是在补救一个已过时的布局模型。只要还在用 float 做结构，你就得持续面对塌陷、基线、空格、行高等一连串连锁反应——不是某条 CSS 写错了，而是整套机制在强撑。真正省心的收尾动作，是把那几行 float 换成 display: flex 或 grid，间隙问题自然归零。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！