Box 6布局错位：如何让小盒子填充大广告盒下方空间？

推荐方案：CSS Grid布局（适配动态添加元素） #

这是最省心的方案，能彻底解决空白填充问题，后续新增小盒子也会自动有序排列。

假设你的HTML结构大致如下：

<div class="layout-container">
  <div class="box-ads">广告区域</div>
  <div class="small-box box5">Box5</div>
  <div class="small-box box6">Box6</div>
  <!-- 后续新增的小盒子都添加在此处 -->
</div>

对应的CSS代码：

.layout-container {
  display: grid;
  /* 定义两列：左侧列自适应宽度，右侧广告列固定300px（可按需调整） */
  grid-template-columns: 1fr 300px;
  /* 行高自动适配内容，最小高度设为100px */
  grid-auto-rows: minmax(100px, auto);
  /* 盒子间的间距，可自定义 */
  gap: 12px;
}

.box-ads {
  /* 让广告盒占据右侧列的2行空间，匹配Box5+Box6的高度总和 */
  grid-row: span 2;
  grid-column: 2;
}

.small-box {
  /* 所有小盒子默认放在左侧列 */
  grid-column: 1;
}

设置完成后，Box6会自动填充广告盒下方的空白区域，后续新增的小盒子会依次在左侧列向下排列，无需手动调整位置。

兼容旧方案：修复浮动布局 #

如果不想改用Grid，可通过调整结构和浮动规则修复问题：

1. 把所有小盒子放到单独的容器中：

<div class="layout-container">
  <div class="small-boxes-wrapper">
    <div class="small-box box5">Box5</div>
    <div class="small-box box6">Box6</div>
    <!-- 后续小盒子添加在此处 -->
  </div>
  <div class="box-ads">广告区域</div>
</div>

2. 对应的CSS代码：

.layout-container {
  overflow: hidden; /* 清除浮动对父容器的影响 */
}

.small-boxes-wrapper {
  width: calc(100% - 312px); /* 总宽度减去广告盒宽度+间距 */
  float: left;
}

.box-ads {
  width: 300px;
  float: right;
  margin-left: 12px;
}

.small-box {
  margin-bottom: 12px;
  /* 小盒子自定义样式 */
}

这种方式通过固定左侧小盒子容器的宽度，让小盒子在左侧自动排列，广告盒固定在右侧，也能解决空白问题，但后续调整广告盒宽度时需要同步修改左侧容器的宽度计算，灵活性不如Grid。

问题根源 #

你遇到的核心问题是传统浮动/普通流布局无法智能识别并填充不规则空白区域——浮动元素会占据右侧空间，导致下方的小盒子只能从浮动元素的底部开始排列。而CSS Grid是基于网格的布局系统，能精准控制元素的行列位置，自然解决这类空白填充问题。

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