负 margin 能“压平”边框，是因为让相邻浮动元素的边框重叠渲染而非删除；左右排列用 margin-left: -1px，上下排列用 margin-top: -1px，需配合 relative 定位与 z-index 提升 hover 元素层级，避免被兄弟元素遮盖右/下边框。
直接用 margin-left: -1px（或 margin-top: -1px）配合 position: relative + z-index 就能解决，但前提是别把它当万能补丁——浮动结构本身已过时，这个方案只是兜底。
为什么负 margin 能“压平”边框加粗
两个相邻浮动元素都设了 border: 1px solid #ccc，浏览器会各自渲染一条 1px 边框，紧贴时视觉上就是 2px 粗线。负 margin 不是删边框，而是让后一个元素往回挪 1px，使它的左/上边框和前一个元素的右/下边框重叠渲染，最终只画一次。
- 左右排列：给第二个及之后的浮动项加
margin-left: -1px - 上下排列：给下方浮动项加
margin-top: -1px - 必须确保父容器没设
overflow: hidden，否则负偏移部分会被裁掉 - 边框宽度变了（比如响应式里切到
2px），-1px就得同步改成-2px，硬编码容易漏
hover 时右边框/下边框消失？这是 z-index 没跟上
DOM 顺序靠后的浮动元素默认层叠层级更低，鼠标移到左边盒子上时，右边盒子会盖住它的右边界，看起来像边框“没了”。这不是 bug，是层叠规则在起作用。
- 给触发
:hover的元素加position: relative（不改变布局，只为创建新层叠上下文） - 再加
z-index: 1，哪怕只是 1，也足以让它浮在兄弟元素之上 - 别用
position: absolute，它会让元素脱离文档流，破坏原有浮动排列 - 示例：
.item:hover { position: relative; z-index: 1; border-color: #333; }
什么时候该放弃浮动，换别的方案
负 margin 在浮动场景下有效，但一旦遇到以下情况，就说明结构本身在报警：
- 父容器用了
display: flow-root或overflow: hidden→ 负 margin 失效，因为 BFC 截断了浮动参照系 - 需要响应式边框（如用
em或rem控制粗细）→-1px无法随缩放自适应 - 项目已用 Flex/Grid 布局 → 强行混用浮动+负 margin 容易行为异常，尤其
flex-wrap: wrap下 - 要支持 IE11 及更早版本 →
gap不可用，但display: flex+marginfallback 更可控
真正麻烦的不是怎么压边框，而是你还在用 float 做整体布局——它本就不该承担这个角色。现代页面里，display: flex + gap 是首选，display: grid 次之，浮动只留给文字环绕图片这种原始语义场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
