如何用CSS创建仅含1px边框的浮动盒子列表

嘿，这个浮动布局的边框重叠问题我太熟了！你之前的思路方向是对的，只是差一点细节调整，我给你几个实用的解决方案：

方法1：负margin抵消边框（兼容性拉满） #

这个方法是处理浮动边框重叠的经典方案，通过负margin让相邻盒子的边框重叠在一起，视觉上就只剩1px了：

.boxes {
  display: inline-block;
  overflow: hidden; /* 隐藏负margin导致容器外的边框 */
}
.last {
  clear: both;
}
.box {
  width: 200px;
  height: 50px;
  border: 1px solid gray;
  line-height: 50px;
  text-align: center;
  float: left;
  position: relative;
  margin-left: -1px;
  margin-top: -1px;
}

原理很简单：每个盒子向左、向上各移动1px，刚好和左侧/上方盒子的边框完全重叠。父容器加overflow: hidden是为了防止最左边和最顶部的边框被移出容器外看不见，完美解决垂直和水平方向的边框重叠问题。

方法2：优化你的原有方案，解决换行顶部线条 #

你的“父容器加左上边框，盒子加右下边框”思路没问题，只需要给盒子加一个负margin-top就能解决换行时的顶部线条问题：

.boxes {
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  display: inline-block;
  overflow: hidden;
}
.last {
  clear: both;
}
.box {
  width: 200px;
  height: 50px;
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
  line-height: 50px;
  text-align: center;
  float: left;
  position: relative;
  margin-top: -1px; /* 关键：把盒子向上拉1px，和父容器/上方盒子的边框重合 */
}

加了margin-top: -1px后，第一行的盒子会向上移动覆盖父容器的顶部边框，换行的盒子则会和上一行盒子的底部边框重叠，彻底解决换行时顶部出现多余线条的问题。

方法3：用CSS Grid（现代布局首选） #

如果不需要兼容IE这类老浏览器，直接用CSS Grid会更简洁，完全不用纠结浮动的问题：

.boxes {
  display: inline-grid;
  grid-template-columns: repeat(auto-fill, 200px); /* 自动适配每行盒子数量 */
  border-top: 1px solid gray;
  border-left: 1px solid gray;
}
.box {
  width: 200px;
  height: 50px;
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
  line-height: 50px;
  text-align: center;
}

Grid布局会自动帮你排列盒子，边框的逻辑和你之前的思路一致，但完全不需要处理浮动和clear，代码更干净，维护起来也更简单。

内容的提问来源于stack exchange，提问作者RaelB