浮动元素下方出现空隙是因行内格式化上下文（IFC）中行框为基线对齐预留空间，且父容器line-height影响最小高度；根本解法是清除浮动或改用Flex/Grid布局。
浮动元素下方为什么会有空隙
这是行内格式化上下文（IFC）的默认行为导致的：浮动元素会脱离文档流，但其父容器仍按普通流排版，而父容器的行框（line box）底部会为基线对齐预留空间——哪怕浮动元素本身没文字，line-height 仍会影响容器的最小高度，造成视觉上“下方多出一段空白”。
检查并调整 line-height 是否生效
如果浮动元素的父容器设置了较大的 line-height（比如 line-height: 2），即使里面只有 float: left 的图片或 div，也会撑高容器底部。这不是 bug，是 CSS 规范中行框计算的副作用。
实操建议：
- 给父容器显式设置
line-height: 0或line-height: 1（注意：这会影响内部真实文本，慎用于含文字的场景） - 更安全的做法是把浮动元素改为
display: block（它本就该是块级行为），并确保父容器没有未重置的font-size/line-height继承 - 用浏览器开发者工具选中父容器，在 computed 标签页里直接看
line-height的最终值是否异常偏大
清除浮动才是根本解法
仅调 line-height 是治标；父容器无法感知浮动子元素高度，才是空隙存在的根源。必须让父容器“重新包含”浮动内容。
立即学习“前端免费学习笔记（深入）”；
推荐三种清除方式及适用场景：
- 使用
::after伪元素（现代标准写法）：.clearfix::after { content: ""; display: table; clear: both; }—— 加在父容器 class 上，兼容性好，无额外 HTML - 设置父容器
overflow: hidden或overflow: auto—— 简单粗暴，但可能意外裁剪阴影、下拉菜单等溢出内容 - 在浮动元素末尾加一个带
clear: both的空标签（如）—— 不推荐，污染语义，仅用于临时调试
容易被忽略的细节
空隙有时不是来自父容器，而是浮动元素自身的 margin-bottom 或后续普通流元素的 margin-top 合并。务必用开发者工具逐层检查盒模型边界，而不是默认归因于浮动。
另外，Flex 或 Grid 布局已基本取代浮动做布局，如果只是为实现并排效果，直接改用 display: flex 可彻底绕过这些兼容性问题。
