如何在两个CSS网格下方添加间距并正确放置新网格

你遇到的问题核心是浮动元素脱离正常文档流：buttonGrid用了float: left，pocTable用了float: right，这两个元素不再占据文档流的完整空间，导致后续的usefulLinks自动填充它们留下的空隙，所以跑到了两者中间。下面是两种直接的解决方法：

方法1：直接给usefulLinks清除浮动 #

修改.usefulLinks的CSS，添加clear: both属性，强制它排在所有浮动元素的下方：

.usefulLinks {
  display: grid;
  grid-auto-columns: 1fr;
  clear: both; /* 关键：清除左右两侧的浮动影响 */
  margin-top: 20px; /* 可选：增加和上方元素的间距，优化视觉效果 */
}

方法2：用容器包裹浮动元素（更规范的布局方式） #

把左侧按钮和右侧联系信息放在同一个容器里，通过伪元素清除容器内的浮动，彻底隔离浮动对后续元素的影响：

修改后的HTML结构： #

<div class="banner">banner</div>

<!-- 新增容器包裹两个浮动模块 -->
<div class="top-container">
  <div class="buttonGrid">
    <div class="buttons">things and stuff</div>
    <div class="buttons">things and stuff</div>
    <div class="buttons">things and stuff</div>
    <div class="buttons">things and stuff</div>
    <div class="buttons">things and stuff</div>
    <div class="buttons">things and stuff</div>
    <div class="buttons">things and stuff</div>
    <div class="buttons">things and stuff</div>
    <div class="buttons">things and stuff</div>
    <div class="buttons">things and stuff</div>
  </div>

  <div class="pocTable">
    <div class="pocHeader">contact info:</div>
    <div class="pocText"><b>Phone: </b> 123-4567</div>
    <div class="pocText"><b>Email: </b> email@email.com</div>
    <div class="pocHeader">manager:</div>
    <div class="pocText">First Last</div>
    <div class="pocHeader">manager:</div>
    <div class="pocText">First Last</div>
  </div>
</div>

<div class="usefulLinks">
  <div>useful links</div>
  <div>first</div>
  <div>second</div>
  <div>third</div>
</div>

新增CSS样式： #

.top-container::after {
  content: "";
  display: table;
  clear: both;
}

额外建议：关于pocTable的布局 #

如果pocTable只是垂直排列文本内容，其实不需要用网格布局，去掉display: grid，换成默认的block布局也能达到同样的居中效果，代码更简洁：

.pocTable {
  text-align: center;
  border: 2px dashed black;
  padding: 10px;
  float: right;
  /* 移除display: grid，使用默认块级元素布局 */
}

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