浮动边框在深色模式下“变粗”本质是视觉错觉，因暗背景使相邻1px边框叠加更显眼；真正根源是父容器塌陷导致子元素挤叠，应优先用display: flow-root清除浮动并稳固布局。
浮动边框在深色模式下变粗，本质没变
深色模式本身不改变浮动行为，所谓“变粗”只是边框颜色在暗背景上更显眼，叠加后视觉冲击更强。真正的问题还是两个浮动 .item 各自画了 border: 1px solid #666，相邻边紧贴，合成 2px 线——和浅色模式完全一样，只是你更容易注意到它。
别急着改颜色或加 prefers-color-scheme 媒体查询，先确认是不是真由浮动引起：打开开发者工具，选中父容器，看 Computed → height 是否为 0px。如果是，说明父容器塌陷，边框“重叠”其实是子元素挤在一起的错觉；如果不是，再处理边框归属问题。
用 display: flow-root 先稳住父容器高度
浮动导致父容器塌陷，是后续所有重叠、背景不显示、边框错位的根源。深色模式下一旦塌陷，background-color 可能变成纯黑，让边框看起来像“浮在空中”，加剧混乱感。
给父容器加这一行就够了：
.container {
display: flow-root;
}
它会强制创建 BFC，让父容器正确包裹浮动子项，且不裁剪溢出内容（比 overflow: hidden 安全）。兼容性已覆盖 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+。若需支持 Safari 14 或更早，降级用 ::after 清除：
.container::after {
content: "";
display: table;
clear: both;
}
边框重叠不是颜色问题，是归属问题
很多人一看到深色模式下边框“太粗”，就去调 border-color 或加 box-shadow 模拟细线，结果 hover 时又失效——这绕开了根本：两个元素不该同时画同一条边。
- 最干净的做法：删掉其中一个边。比如统一只留
border-right，最后一个子项再额外清掉右边界 - 若必须保留完整边框，再用负 margin 盖：所有浮动项加
margin-left: -1px，但前提是边框宽度严格一致，且父容器overflow: visible - 深色模式下推荐抽成 CSS 变量：
--border-width: 1px，然后写margin-left: calc(-1 * var(--border-width))，方便后续随主题切换
注意：不要在深色模式媒体查询里单独加 border-collapse——它对 div 和浮动完全无效，只会干扰调试。
真正该做的，是换掉浮动
浮动在深色模式里没特殊逻辑，但它放大了所有老问题：塌陷难察觉、负 margin 在缩放后偏移、hover 层级失效、响应式断点错乱。而 display: flex 配合 gap 能天然规避这些：
.container {
display: flex;
gap: 1px;
}
.item {
border: 1px solid #666; /* 不需要负 margin，也不用清浮动 */
}
如果项目已用 CSS 变量管理主题色，gap 还能直接配合深色模式切换：gap: var(--border-width, 1px)。比在浮动上打补丁快得多，也更可靠。
最容易被忽略的一点：深色模式适配不是加一堆 @media (prefers-color-scheme: dark)，而是先确保布局本身健壮。浮动结构一旦塌陷，再精细的颜色调整都盖不住底层错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
