浮动后父元素下方的空白通常源于html换行符被解析为空格并受font-size和line-height影响，而非浮动本身；清理空格、设font-size:0（需重置子元素）或触发bfc（如overflow:hidden、display:flow-root）可解决，但现代布局应优先使用flex/grid。
浮动后父元素下方的空白，八成不是浮动本身惹的祸，而是你写在 HTML 里的换行和缩进被浏览器当成了空格字符，再叠加上父容器的 font-size 和 line-height，最终在视觉上撑出一段“莫名”间隙。
为什么清理HTML空格能立刻见效
多个 float: left 的 <div> 写成多行时，例如：
<pre class="brush:php;toolbar:false;"><div class="item"></div>
<div class="item"></div></pre>
<p>中间那个换行符会被解析为一个 <code> 级别的空白节点。只要父容器有 font-size: 16px 和默认 line-height，这个空格就会占据约 4px 高度，并参与行框（line box）的基线对齐计算——哪怕子元素都 float 了，父容器仍按 inline formatting context 处理它。
把它们压成一行：<div class="item"></div>
<div class="item"></div>，间隙立刻消失。
用 font-size: 0 屏蔽空格渲染（但必须重置子元素）
如果 HTML 无法手动压缩（比如由 Vue 模板、CMS 或 SSR 渲染生成），font-size: 0 是最直接的干预方式：它不删除空格，只是让空格失去视觉高度。
- 给父容器设
font-size: 0 - 所有浮动子元素必须显式设置
font-size，例如.item { font-size: 14px; } - 若子元素含
<img>或文字，漏掉重置就会变看不见 - 慎用于富文本容器——
<p></p>、<span></span>可能继承font-size: 0而失真
别只盯着空格，先确认是不是父容器塌陷
开发者工具里选中父容器，看 computed 样式中的 height 是否为 0 或远小于预期。如果是，说明根本问题是**高度塌陷**，而非空格间隙。
-
font-size: 0只治空格，不解决塌陷；它让间隙“看起来没了”，但父容器依然包不住浮动子元素 - 塌陷会导致背景色/边框消失、后续元素上浮，这是更严重的布局断裂
- 真正要闭合父容器，得触发 BFC：用
overflow: hidden、display: flow-root，或伪元素::after+clear: both
现代项目里，该停手的时候就停手
还在靠 font-size: 0、line-height: 0、vertical-align 和各种 clear 组合拳来“修”浮动，本质上是在给一个已淘汰的布局模型打补丁。Flex 和 Grid 不脱离文档流，父容器高度自动撑开，间隙问题天然不存在。
真正难的不是选哪条 hack，而是意识到：只要浮动还承担着多列、侧边栏、卡片网格这些典型布局任务，你就永远绕不开这些像素级的对齐陷阱和塌陷调试。
