如何修改CSS使Box 3位于Box 1正下方（不改动HTML结构）

无需修改HTML结构，保持box-1、box-2、box-3、box-4的语义顺序，以下两种方案都能实现右侧Box 1与Box 3上下堆叠、左侧Box 2与Box 4上下堆叠的布局，且元素高度支持自适应：

方案一：CSS Grid 实现（现代浏览器优先） #

通过网格布局精准定位每个盒子的位置，适配高度自适应场景：

#parent {
  width: 1100px;
  display: grid;
  grid-template-columns: 800px 200px;
  grid-auto-flow: dense;
}

#box-1 {
  background: green;
  grid-column: 2;
  grid-row: 1;
}

#box-2 {
  background: red;
  grid-column: 1;
  grid-row: 1 / span 2;
}

#box-3 {
  background: yellow;
  grid-column: 2;
  grid-row: 2;
}

#box-4 {
  background: gray;
  grid-column: 1;
  grid-row: 3;
}

核心要点：

• grid-template-columns划分固定宽度的左右两列
• grid-column/grid-row指定每个盒子的网格位置，让Box 3固定在Box 1正下方
• grid-auto-flow: dense自动填充网格空白，适配高度自适应需求

方案二：浮动布局实现（兼容旧浏览器） #

利用浮动和清除浮动的特性实现布局，兼容性更强：

#parent {
  width: 1100px;
  overflow: hidden;
}

#box-1 {
  background: green;
  width: 200px;
  float: right;
}

#box-2 {
  background: red;
  width: 800px;
  float: left;
}

#box-3 {
  background: yellow;
  width: 200px;
  float: right;
  clear: right;
}

#box-4 {
  background: gray;
  width: 800px;
  float: left;
  clear: left;
}

核心要点：

• Box 1/3右浮动、Box 2/4左浮动，划分左右两列
• clear: right强制Box 3落在Box 1正下方，避免同一行排列
• clear: left强制Box 4落在Box 2正下方
• 父容器overflow: hidden清除内部浮动，防止高度塌陷

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