Flex布局问题：.maroon容器内两个.whitewrap元素无法换行求助

以下几种CSS方案都能在不添加额外元素的前提下实现需求：

方法1：Flexbox布局（最简洁推荐） #

给.maroon容器设置垂直方向的flex布局，通过gap控制区块间的间距（间距会显示容器的maroon背景）：

.maroon {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 可根据需求调整间距大小 */
}

原理：flex-direction: column会强制子元素垂直排列，gap属性直接定义子元素间的间距，无需额外处理换行和间距背景。

方法2：块级元素+上外边距 #

如果项目不支持Flexbox，可将.whitewrap设为块级元素自动换行，再给第二个区块添加上外边距：

.maroon {
  display: block; /* 确保容器为块级，默认通常已满足 */
}
.whitewrap {
  display: block; /* 取消inline-block/float等导致并排的属性 */
  width: 100%; /* 可选，确保区块占满容器宽度 */
}
.whitewrap:nth-child(2) {
  margin-top: 20px; /* 控制两个区块间的maroon背景间距 */
}

方法3：清除浮动（针对原布局用float的情况） #

如果之前是通过float让两个区块并排，先取消浮动并清除容器浮动，再添加间距：

.maroon {
  overflow: hidden; /* 触发BFC清除浮动，确保容器包裹子元素 */
}
.whitewrap {
  float: none; /* 取消浮动，恢复自动换行 */
}
.whitewrap:nth-child(2) {
  margin-top: 20px;
}

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