浮动元素间空隙源于HTML换行符被解析为U+0020空格字符，属HTML解析规则而非CSS样式或浏览器bug；font-size: 0可根治但需重置子元素字号，推荐改用flex或grid布局替代浮动。
浮动元素间空隙来自HTML换行符被解析为U+0020空白字符
这不是 margin、padding 或浏览器 bug，而是 HTML 解析规则导致的：当你把多个 <div class="item"></div> 写成多行时，换行符会被浏览器当作一个空格（U+0020）处理，并参与行内格式化上下文（IFC）排版。只要父容器有 font-size: 16px 和默认 line-height，这个空格就会撑开约 4px 宽度，在基线对齐时造成视觉错位。
常见现象包括：
- 多个
float: left的卡片底部不对齐 - 图片并排后中间漏白、高度参差
- 开发者工具里看到元素盒模型之间真有 gap，但查不到 margin/padding
用浏览器 DevTools 选中父容器 → Computed → 查看 font-size 和 line-height 是否非零继承，基本就能确认根源。
为什么 clear:both 或 overflow:hidden 看起来“修复”了但实际没根除
clear: both 只作用于紧跟浮动之后的块级盒，它不处理父容器内空白字符渲染；overflow: hidden 是靠触发 BFC 让父容器重新计算高度，把浮动子项“包住”，但间隙本身还在——只是被裁剪或对齐方式掩盖了。一旦你给子元素加 outline: 1px solid red 或背景色，立刻会发现它们并未真正贴紧。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 给父容器写
clear: both—— 语法合法，但完全无效，它不参与浮动流 - 依赖
overflow: hidden修间隙，结果意外裁剪了box-shadow或下拉菜单 - 在浮动项上直接加
clear: both—— 强制换行，破坏并排布局
font-size: 0 是最通用的根治法，但必须重置子元素字号
设父容器 font-size: 0 能切断空白字符的渲染能力，因为空格需要字号才能占空间。但它会干掉所有内联文本（按钮文字、链接、伪元素内容），所以必须显式恢复子元素字号。
实操要点：
- 父容器加
font-size: 0 - 每个浮动子元素（如
.item）单独设font-size: 14px（或你需要的值） - 若子元素含
<img>或纯块级结构，font-size: 0对它们无影响，安全 - 避免只设
line-height: 0—— 它不影响空格宽度，只压缩行高，可能让文字挤在一起
现代项目里该怎么做：别修 float，换技术栈
浮动本意是图文环绕，不是做网格或卡片布局。你现在花时间调 vertical-align、压 font-size、写 ::after 清除，本质是在维护一套已被淘汰的布局范式。
真正省事又可靠的方案：
- 单行/多行并列 → 改用
display: flex+gap: 8px - 二维网格 → 改用
display: grid+grid-gap: 8px - 响应式断点里无需手动重置浮动，
flex-wrap: wrap自动处理换行
那些“修好了”的浮动布局，往往在改字体、换设备、加动画时突然崩出新间隙——因为问题从来不在表面，而在底层机制不匹配。
