这不是bug，是HTML换行符被解析为U+0020空格字符所致；font-size: 0可根治，但需重置子元素字号；vertical-align配合line-height: 0更精细但要求高；overflow: hidden仅掩盖问题而非解决。
为什么float元素之间总冒出1px缝隙
这不是bug，是浏览器把HTML换行符当空白字符渲染的结果。两个<div class="item"></div>写在不同行，中间的换行+缩进会被解析成一个U+0020空格，在font-size: 16px且未设line-height: 0时，它撑开约4px高度——但视觉上常被误读为“1px缝隙”，尤其当元素带边框或背景时更明显。
用font-size: 0快速根治（最常用）
给浮动元素的父容器设font-size: 0，直接让空白字符失去渲染尺寸。注意子元素要重置字号，否则文字看不见：
.list {
font-size: 0;
}
.list .item {
font-size: 14px; /* 或 rem/em 值 */
float: left;
width: 50%;
}- 适用于所有子元素不含重要内联文本的场景（比如纯图标、卡片）
- 别只在
<ul>上设，得作用于直接包裹浮动项的容器 - 如果子元素里有
<span>或按钮，它们的font-size也得显式声明，不能靠继承
用vertical-align + line-height: 0精细控制
比font-size: 0更保留字体继承链，但要求更严：
- 父容器加
line-height: 0 - 每个浮动子元素加
display: inline-block和vertical-align: top（float本身不响应vertical-align） - 若子元素是
<div>，必须先改display，否则vertical-align无效 - Firefox对
line-height: 0更敏感，同一值在Chrome里可能还剩1px，得配合margin-bottom: -1px微调
别碰overflow: hidden来“假装解决”
给父容器加overflow: hidden会触发BFC，让容器高度算准、看起来缝隙没了——但空白字符还在，只是被裁掉或对齐方式变了。一旦你加outline: 1px solid red调试，就会发现浮动项底部依然没贴紧。
立即学习“前端免费学习笔记（深入）”；
真正难的不是压住那1px，而是意识到：这个缝隙从来不在CSS规则里，它藏在HTML解析过程里。盯住“换行符是否被转为空白字符”和“子元素实际渲染宽度是否溢出”这两点，比反复调margin靠谱得多。
