浮动元素边框“变粗”是因相邻元素各自绘制边框所致；解决方法包括负 margin 盖住、hover 时加 position: relative 和 z-index、改用 flex gap 或 box-shadow，或统一边框归属。
为什么浮动元素的边框会“变粗”
两个 float: left 的块并排时，各自画出 border: 1px solid #000，视觉上相邻边就出现 2px 粗的线。这不是渲染 bug，而是每个元素独立绘制边框的结果——浏览器不会自动“合并”它们。你不能用 border-collapse（它只对 table 有效），也不能靠 overflow: hidden 修复，那只会裁掉内容。
margin-left 负值怎么写才生效
核心逻辑是：让后一个元素向左挪动一个边框宽度，盖住前一个元素的右边界。
- 给所有后续浮动子项统一加
margin-left: -1px（假设边框是1px） - 父容器必须保持
overflow: visible（默认值），否则负偏移部分会被裁剪 - 若边框是
2px，margin-left就得改成-2px；硬编码值要和边框宽度严格一致 - 不要用百分比值，IE8 及更早版本解析不稳定，现代项目也容易在缩放或响应式中失准
示例：
.item {
float: left;
width: 120px;
height: 100px;
border: 1px solid #666;
margin-left: -1px; /* 关键：盖住左边元素的右 border */
}
hover 时边框被盖住怎么办
加了 margin-left: -1px 后，:hover 换颜色经常失效——因为新边框还是被前一个元素压着。
- 必须给
:hover元素加position: relative（仅此即可，不用配top或left） - 再设
z-index: 2（数值大于默认的auto或同级其他元素） - 别给所有元素都加
position: relative，否则层级混乱，hover 效果可能错位
常见错误：
- 只加
z-index却没开定位 → 完全无效 - 给父容器设
overflow: hidden→ hover 区域被裁，交互失灵
比负 margin 更稳的替代方案
gap 在 Flex 布局里更干净，但浮动布局里不支持；而负 margin 在浮动中虽可用，却受外边距合并、父容器溢出、响应式缩放等干扰。
- 如果能迁移到
display: flex，直接用gap: 1px，语义清晰且无层级问题 - 若必须保留浮动，把边框宽度抽成 CSS 变量：
--border-width: 1px，然后margin-left: calc(-1 * var(--border-width)) - 涉及复杂交互（如展开/收起、动画）时，
box-shadow: 0 0 0 1px #666比改border更轻量，也不触发重排
最容易被忽略的一点：边框重叠本质是设计归属问题——不是“怎么盖住”，而是“哪条边该由谁来画”。先删掉重复边框（比如统一只留 border-right），再考虑偏移，往往比硬套 margin-left: -1px 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
