浮动间距错乱源于浮动脱离文档流、HTML空白字符及父容器未创建BFC三者叠加；4px间隙是换行符被解析为空格并在IFC中渲染所致，font-size:16px时显形；vertical-align对float元素无效；清除浮动后空白来自清除元素自身高度；现代布局应优先使用flex或grid替代float。
浮动布局里的“间距错乱”基本不是 margin 写错了，而是浮动脱离文档流 + HTML 空白字符 + 父容器未创建 BFC 三者叠加的结果。直接调 margin 像在修漏水的水管却不管水压源，越调越偏。
为什么浮动元素之间总有 4px 间隙？
这不是 bug，是浏览器把 HTML 换行符解析成空格字符（U+0020），放进行内格式化上下文（IFC）里渲染了。当父容器 font-size: 16px 且没重置 line-height 时，这个空格就撑开约 4px 宽度。
- 用开发者工具选中父容器，在 Computed 面板看
font-size和line-height是否继承了非零值 -
vertical-align对float: left的块级元素完全无效——它只作用于 inline 或 inline-block 元素 - 压缩 HTML 成一行（
<div class="item"></div> <div class="item"></div>）能立刻消失，但 CMS 或 Vue 编译后往往不可控 - 设父容器
font-size: 0是最直接解法，但它会让所有子元素文字消失，必须显式重置每个.item { font-size: 14px; }
为什么最后一项右边距多出空白？
浮动元素不参与外边距合并规则，margin-right: 10px 会无差别加给每一项，包括末尾那个。视觉上右侧就多了一块“悬空”的留白。
- 统一用
margin-right，再配.item:last-child { margin-right: 0; } - 或改用相邻兄弟选择器：
.item + .item { margin-left: 10px; }，天然避开首项 - 别用
margin简写——margin: 10px会把上下 margin 也带上，干扰垂直对齐 - 如果用了
box-sizing: border-box，记得宽度计算要扣掉 padding 和 border，否则四舍五入可能让最后一项换行
为什么清除浮动后下方还有一大块空白？
那不是“间隙”，是清除元素（比如 ::after）本身作为块级节点占了高度，加上它的 margin、line-height 或父容器默认字体设置共同撑开的。
立即学习“前端免费学习笔记（深入）”；
- 伪元素清除必须带
content: ""和display: block（或table），漏任一都失效 - 安全写法：
.clearfix::after { content: ""; display: block; clear: both; height: 0; font-size: 0; line-height: 0; } - 更推荐现代解法：
display: flow-root—— 一行代码创建 BFC，不新增节点、不占高度、不裁剪position: absolute子项 - 避免
overflow: hidden：它可能意外裁剪阴影、下拉菜单或 transform 位移后的内容
真正该停用 float 做布局
浮动本意是图文环绕，不是多列排列。你花半天调 clear、font-size: 0、vertical-align，不如三行 CSS 切到 flex：
-
.container { display: flex; gap: 12px; }—— 间距由gap统一控制，无空白字符干扰 -
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); }—— 响应式栅格天然对齐 - flex/grid 下
margin不再失效，justify-content和align-items可控性远超浮动 - 兼容性已不是问题：
gap在 Chrome 84+/Firefox 63+/Safari 14.1+ 全支持；display: flow-root在 Safari 15.4+ 也稳了
最容易被忽略的是：所有“浮动间距问题”的调试过程，本质都在对抗 float 的原始设计意图。工具用错了，补丁永远追不上新设备、新字体、新缩放比例带来的偏差。
