html源码中的换行与空格被浏览器当作空白字符参与排版，导致浮动元素间出现4px左右间隙；根本原因是inline/inline-block上下文中空白符生效，而非清除浮动失效。
HTML源码里换行和空格被渲染成空白字符
浮动元素之间或浮动元素与文字之间出现“莫名其妙”的间隙，大概率不是CSS清除逻辑失效，而是HTML源码中肉眼不可见的换行符、缩进空格被浏览器当作 处理了。这种空白在display: inline或display: inline-block上下文中会真实参与排版，而浮动容器若混用内联级子项（比如<span></span>、<img>），就会暴露出来。
常见错误现象：
- 多个
<div class="item"></div>写在不同行，即使加了float: left和.clearfix::after，横向仍有 4px 左右间隙 - 浮动图片后面紧跟一段文字，文字首行明显下沉或上浮，调整
margin无效 - 开发者工具里看到元素盒模型“干净”，但视觉上就是不贴边
实操建议：
- 把所有浮动子元素写在同一行：
<div></div> <div></div> <div></div>（适合简单结构） - 用HTML注释“吃掉”空白：
<div></div> <!-- --><div></div> - 给父容器设
font-size: 0，再给每个子元素单独设font-size（注意：仅适用于子元素不含文本或已显式重置字体的场景） - 检查是否误把
<img>当块级用——它默认是inline，加vertical-align: top或display: block更稳妥
浮动父容器里混排inline元素时的baseline对齐干扰
间隙不是来自清除本身，而是浮动修复后，父容器重新参与文档流计算，内部inline元素（文字、<img>、<span></span>）按默认vertical-align: baseline对齐，导致底部留白。这个空隙无法用margin或padding直接消除，因为它是行框（line box）高度的一部分。
使用场景：
- 侧边栏
float: left+ 右侧正文含段落和图片 - 导航菜单用浮动
<li>，但<a></a>标签未设display: block - 图标
<i></i>和文字同行，且父容器用了.clearfix
实操建议：
- 给所有可能参与行框的子元素加
vertical-align: top（适用于inline或inline-block） - 把非浮动内容也设为
display: block，彻底退出行内格式化上下文 - 避免在浮动容器中直接放纯文本节点——用
<div>或<code><p></p>包裹 - 用开发者工具选中父容器 → Computed → 查看
line-height是否继承异常值（如normal在不同字体下表现不一） -
.clearfix::after { content: ""; display: block; clear: both; }→display: block仍受父容器line-height撑高 -
.clearfix::after { content: " "; display: table; clear: both; }→ 多了一个空格字符，可能触发换行或宽度 - 忘了给父容器设
font-size: 0，而::after又继承了该值，导致伪元素有高度
伪元素清除法写错导致::after意外占位
::after本身不会产生间隙，但写法错误会让它变成一个有尺寸的块——比如漏了content: ""，或加了height、line-height、font-size却没重置。现代浏览器下，display: table比display: block更安全，因为它不参与行内布局，不会受父容器line-height影响。
常见错误：
正确写法（复制即用）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
- 不要加
height: 0或visibility: hidden——table无内容即无高度 - 避免在
content里写空格、\00a0等字符 - 如果父容器本身是
inline-block，需额外设vertical-align: top防止基线对齐间隙
现代项目里还该用float清除吗
不该。清除浮动本质是补救一个过时布局模型的副作用。只要还在用float做多列或网格排列，间隙问题就不可能根除——它不是bug，是规范定义的行为。2026年，display: flex和display: grid已覆盖全部主流浏览器，display: flow-root也能安全替代overflow: hidden触发BFC。
迁移建议：
- 替换浮动列表：
.container { display: flex; gap: 12px; }，删掉所有float、clear、clearfix - 侧边栏+主内容：
.layout { display: grid; grid-template-columns: 200px 1fr; }，无需清除、无间隙、响应式天然支持 - 老代码临时修复：优先用
display: flow-root代替overflow: hidden，语义清晰且不裁剪溢出内容
最易被忽略的一点：浮动带来的间隙，往往不是某一行CSS能解决的，而是整个布局模型与内容语义不匹配的结果。检查间隙前，先问一句——这里真需要float吗？
