浮动元素间空白间隙本质是html空格渲染、文档流断裂及行框计算异常三重叠加所致；需分层处理：消除空格（font-size:0或注释）、清除浮动（::after伪元素）、改用flex/grid布局。
float布局产生的空白间隙，本质不是float本身的问题，而是它引发的文档流断裂、行框计算异常和HTML空格渲染三重叠加的结果。直接调margin或padding只是掩盖症状，必须分层处理。
为什么浮动元素之间总有看不见的空隙
多个float: left的div写在不同行，浏览器会把换行符和缩进当作一个空格字符渲染；同时，父容器若未触发BFC，高度塌陷会让后续元素“上浮”，视觉上形成间隙。这不是bug，是CSS规范中inline formatting context对空白节点的默认处理逻辑。
- 用开发者工具选中父容器，看
Computed里的height是否为0或远小于预期——这是塌陷的铁证 - 检查父容器
font-size是否继承了较大值（如16px），它会放大HTML空格的宽度 - 浮动元素若含文字，
line-height也会参与行框底部预留空间计算，即使内容已脱离流
清除浮动必须作用在正确的位置
clear: both只对紧跟在浮动元素之后、且处于正常文档流中的块级元素生效。把它加在父容器上没用，加在伪元素里却漏掉content: ""更常见。
- 推荐用
::after伪元素清除：.container::after { content: ""; display: table; clear: both; } - 如果父容器需要背景色或边框，优先用
overflow: hidden触发BFC——但注意：它会裁剪position: absolute溢出的内容 - 现代项目直接用
display: flow-root，语义清晰、无副作用，Chrome 58+/Firefox 53+/Safari 10.1+均支持
HTML空格和font-size怎么配合用
把浮动元素写在同一行能治标，但代码可读性差；用注释“吃掉”空格又冗余。最可控的是从渲染源头干预：font-size: 0让空格宽度归零，再单独给子元素设回字体大小。
- 父容器加
font-size: 0，子元素必须显式设置font-size（否则文字消失） - 仅适用于纯布局容器，含文本的浮动块慎用——否则要逐个重置
line-height和vertical-align - 比
white-space: nowrap更彻底，后者只防换行，不解决空格像素级宽度
真正该停手的时候
只要还在用float做多列布局，就注定要反复调试clear、overflow、line-height和font-size。Flexbox和Grid不脱离文档流，父容器高度自动撑开，间隙问题天然不存在。老项目迁移时，优先替换侧边栏+正文这类典型场景，别试图“修好”float布局——它本就不该承担这个角色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
