浮动卡片边框“重叠”是布局错位与盒模型偏差导致的视觉假象，须通过box-sizing: border-box、padding控距、flex/grid替代浮动三方面解决，border-collapse对其完全无效。
浮动卡片流中边框“重叠”不是真重叠，而是布局错位+盒模型计算偏差共同导致的视觉假象；解决它不能靠border-collapse，必须从box-sizing、清除机制和间距控制三处同时入手。
为什么border-collapse对浮动卡片完全无效
border-collapse只作用于<table>及其后代（<tr>、<td>等），对div、ul或任何浮动容器都不生效。你在浮动卡片父容器上写border-collapse: collapse，Computed面板会直接标为not applicable——它不参与文档流控制，也不是通用“去重叠开关”。看到边框变粗就加它，只会掩盖真实问题。
浮动卡片边框撑宽换行的根因与修复
三张width: 33.333%的浮动卡片加1px边框后无法单行排列，根本原因是默认box-sizing: content-box把border和padding算在width之外。
- 所有浮动卡片必须显式声明
box-sizing: border-box，否则33.333% + 2px必然超限 - 推荐全局重置：
* { box-sizing: border-box; }，IE8+ 全支持，无兼容风险 - 若卡片含
padding，也必须纳入border-box计算，否则响应式断点仍会崩
相邻卡片之间“边框变粗”的实际成因与稳妥解法
视觉上两张卡片的右边框和左边框紧贴变粗，通常不是边框真的重叠了，而是：
立即学习“前端免费学习笔记（深入）”；
- 父容器宽度不足：比如三张卡总宽
100% + 2px（每张1px右/左border），导致最后一张换行顶到第一张末尾 - 用
margin控制间距时，浮动下外边距行为不稳定，尤其在缩放或字体加载延迟时失效 - 未统一
box-sizing，部分卡片按content-box渲染，宽度计算不一致
稳妥做法是放弃margin，改用padding模拟间距，并确保所有卡片都设box-sizing: border-box。若必须保留边框间隙效果，display: flex + gap: 1px比浮动+负margin更稳定、无副作用。
hover边框闪烁或跳动的预防要点
给浮动卡片加border hover 效果时，边框出现/消失会改变元素尺寸，触发重排，造成位移。
- 初始状态预留空间：
border: 2px solid transparent，hover时只改border-color - 或用
box-shadow: 0 0 0 2px #ccc替代border，hover时改颜色，完全不触发布局计算 - 避免用
outline——虽不占布局空间，但不支持border-radius，圆角卡片会露馅
真正容易被忽略的是：浮动卡片布局本身已过时，display: flow-root能解决塌陷，却治不了边框错位；而flex或grid从源头规避所有这些问题——只要浏览器支持（Chrome 29+/Firefox 28+/Safari 6.1+），就不该再用float做卡片流。
