浮动网格的“间隙”源于HTML换行符生成的空白文本节点，非float导致；解决需对直接父容器设font-size:0并重置子元素字体，或改用flex/grid布局。
浮动网格布局本身不产生间隙，你看到的“间隙”几乎全是 HTML 源码换行符被解析为文本节点导致的——它和 float 无关，而是 inline formatting context 的副作用。直接给父容器设 font-size: 0 能压掉这个空格，但必须配对重置子元素字体，否则文字全消失。
为什么浮动网格里还有“间隙”
这不是浮动造成的，是父容器内多个 <div> 标签写成多行时，HTML 解析器把换行符当作文本节点渲染了。只要父容器有非零 font-size 和默认 line-height，这个看不见的空格就会占约 4px 高度，并参与基线对齐——哪怕所有子元素都 float: left，父容器仍按行内上下文处理它。
- 常见错误现象：
float元素横向排列后底部参差不齐、父容器背景色断开、后续元素上浮 - 调试关键：打开开发者工具，选中父容器，看
computed height是否远小于预期；若为0，说明是高度塌陷，不是空格间隙 -
font-size: 0只影响空格渲染高度，不解决塌陷；塌陷得靠触发 BFC（如overflow: hidden或display: flow-root）
font-size: 0 必须这么写才有效
它只对**直接包裹浮动子元素的父容器**生效。套一层无关外层 div 并不能传导作用域，空白节点是在子元素同级生成的。
- ✅ 正确：
.grid { font-size: 0; }→.grid > div { float: left; font-size: 14px; } - ❌ 错误：
.wrapper { font-size: 0; }，而.grid是它的子元素，div在.grid内 —— 空隙仍在 - 子元素必须显式声明
font-size，用px或rem更稳；避免em，否则在font-size: 0父级下计算值为0 - 如果子元素含
<input>、<button>或<img>，它们的 placeholder、边框或垂直对齐可能异常，需单独加font-size或vertical-align: top
比 font-size: 0 更省心的现代方案
浮动布局已过时，display: flex 或 display: grid 天然无视 HTML 空白字符，无间隙、无塌陷、语义清晰。
立即学习“前端免费学习笔记（深入）”；
-
.grid { display: flex; flex-wrap: wrap; }即可替代浮动网格，子元素默认不脱离文档流，父容器高度自动撑开 - 想保持等宽响应式栅格？用
flex: 1或flex-basis: calc(25% - 8px)，比固定width更健壮 - 兼容性：Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+；IE10/11 需加
-ms-flexbox前缀（仅当必须支持） - 别为了“维持现有结构”硬扛
font-size: 0+clear: both+overflow: hidden组合拳——那是在给淘汰模型打补丁
真正容易被忽略的是：font-size: 0 不会删除 DOM 中的空白文本节点，它只是让那个节点不可见。如果你用 JS 动态插入子元素，或依赖 textContent 计算，这个节点依然存在。新项目该切就切，老项目修之前先确认——你到底是在修间隙，还是在修塌陷。
