浮动元素下方间隙主要由行高与基线对齐或父容器未闭合导致。1. 可通过设置 line-height: 1 或 font-size: 0 消除行框空白；2. 使用 ::after 伪元素清除浮动或触发 bfc 闭合容器，推荐用 flex 布局避免问题。
浮动元素下方出现间隙，通常是由于浮动破坏了正常的文档流，导致父容器无法正确包裹子元素，或者行高（line-height）与字体基线（baseline）引起视觉上的空隙。解决方法主要有两种：调整 line-height 或正确清除浮动。
1. 使用 line-height 消除间隙
当浮动元素包含文字内容时，浏览器会根据父元素的 line-height 分配行框高度，即使元素已浮动，仍可能保留基线对齐所需的空间，从而在下方留下空白。
解决方式：- 将浮动元素的 line-height 设置为较小值，如
line-height: 1;或0（若无文本） - 设置
font-size: 0;于父容器，再单独设置子元素字体大小 - 将浮动元素设为
display: block;并移除文本相关样式影响
2. 清除浮动以闭合容器
父容器未包含浮动子元素时，会出现布局塌陷，看起来像下方有“间隙”，实际是父元素高度未撑开。
常用清除浮动方法：
- 使用伪类清除：给父容器添加以下 CSS
.container::after {<br>
content: "";<br>
display: table;<br>
clear: both;<br>
}
-
触发 BFC（块级格式化上下文）：给父元素设置
overflow: hidden;或overflow: auto; -
使用 flex 或 grid 布局替代浮动：现代布局更推荐用
display: flex;避免浮动带来的问题
基本上就这些。根据具体场景选择调整行高或清除浮动，多数间隙问题都能解决。关键是理解浮动对文档流和行框的影响。
立即学习“前端免费学习笔记（深入）”；
