兼容旧版CSS中的重叠网格元素。

使用浮动和清除浮动的技巧，而不是使用网格布局来处理元素之间的重叠。以下代码示例展示了如何使用浮动和清除浮动来解决重叠问题：

HTML代码：

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码：

.wrapper {
  overflow: hidden;
}

.box {
  width: 50%;
  float: left;
}

.box:nth-of-type(odd) {
  clear: both;
}

在这个例子中，我们使用 float 属性来将两个盒子放在同一行上。由于盒子的宽度为50%，因此它们会相互重叠。为了防止它们重叠，我们使用 nth-of-type 选择器针对每个奇数盒子应用 clear: both 属性，以清除前面所有的浮动。

这种方法向后兼容，因为它不依赖于任何新的CSS特性。但是，它也有一些缺点，例如在移动设备上可能会导致布局问题。因此，如果你的目标是创建响应式布局，你可能需要使用更现代的CSS网格系统。