浮动元素间4px缝隙源于html换行符被解析为空格字符，在font-size:16px且line-height未重置时撑开约4px宽度；需用font-size:0切断空白渲染并显式重置子元素字号，或改用flex/grid布局根治。
浮动元素之间的“缝隙”不是 bug，是 HTML 换行符被浏览器解析为空格字符后，在行内格式化上下文（IFC）中参与渲染的结果。直接调 margin 或删空格能临时掩盖，但治标不治本；真正要切断空白字符的视觉影响，或干脆换掉 float。
为什么浮动元素间总有 4px 缝隙？
只要浮动子元素在 HTML 中写成多行（比如 <div class="col"></div>\n<div class="col"></div>），浏览器就会把换行当作一个空格字符（U+0020）处理。这个空格在父容器 font-size: 16px、未重置 line-height 时，会撑开约 4px 宽度——它不占盒模型，调试器里看不见 margin 或 padding，但真实存在。
- 用开发者工具选中父容器，在 Computed 标签页确认
font-size和line-height是否继承了非零值 -
vertical-align对float: left的块级元素完全无效（只作用于inline或inline-block） -
margin-right: -4px是危险操作：缩放时偏移失准，box-sizing下位置不可控，最后一列右侧留白可能消失
用 font-size: 0 切断空白渲染
这是兼容性最好、见效最快的方案：让空格字符失去视觉高度，而不是删除它。
- 给父容器设
font-size: 0，缝隙立刻消失 - 所有浮动子元素必须显式重置字号，例如
.col { font-size: 14px; }，漏掉就文字不可见 - 慎用于含富文本的容器（如 CMS 输出的
<p></p>），编辑器插入的内容可能继承font-size: 0而失真 -
<img>、伪元素不受影响，但按钮、链接等内联文本必须单独恢复font-size
display: flow-root 解决塌陷引发的“大空白”
所谓“下方一大块空白”，本质是父容器高度坍缩为 0，后续元素从浮动元素底部开始渲染——这不是缝隙，是塌陷。
- 优先用
display: flow-root：专为此设计，无裁剪副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 均支持 - 避免
overflow: hidden：它会意外裁剪position: absolute子项或阴影 - 别给父容器写
clear: both：语法合法但毫无作用，它不参与浮动流 - 兼容老浏览器可用伪元素清除：
.clearfix::after { content: ""; display: block; clear: both; }，注意别漏content: ""
现代项目里真正该做的其实是停用 float 做布局
浮动本意是图文环绕，不是多列布局。现在所有主流浏览器都支持 display: flex 和 display: grid，它们没有空白字符干扰、无需清除、天然响应式。
- 并排布局：
.container { display: flex; gap: 12px; } - 网格布局：
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } -
gap是浏览器原生控制间距的属性，无渲染偏差，也不受 HTML 换行影响 - 如果必须兼容 IE11，可用
flex+margin组合，但需为第一项加margin-left: 0，其余项设margin-left避免首项空白
最麻烦的不是写错一行 CSS，而是写了 margin-right: -4px 后，你不再去查 computed 样式里真实的 border、padding、line-height 值是否对齐——那才是缝隙真正的藏身之处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
