JS修改内部div显示方式后父div背景未完整填充问题

这是CSS浮动的经典特性导致的父容器高度塌陷：为.column-G3-outside设置float: left后，元素会脱离常规文档流，它的直接父元素.align-center以及外层的.G3容器默认不会计算浮动子元素的高度，最终.G3的高度只由内部残留的非浮动流内容决定，自然无法完整包裹三列内容，背景色也就无法覆盖全部区域。

不需要改动现有JS逻辑，只需要给浮动列的直接父容器.align-center添加清除浮动的CSS规则，强制父容器识别浮动子元素的高度即可：

.align-center::after {
  content: "";
  display: block;
  clear: both;
}

添加该规则后.G3容器就能自动匹配三列的总高度，#a914b5的背景色会完整覆盖所有模块内容。

你当前用JS计算宽度、控制浮动的实现存在两个明显缺陷：

• 用screen.width获取的是设备硬件屏幕宽度，不是浏览器当前视口宽度，用户手动调整桌面端浏览器窗口尺寸时，布局不会实时响应
• 手动计算列宽、间距的逻辑冗余，后续调整列数、间距需要改JS运算逻辑
  完全可以用CSS Flex布局替代JS+浮动的实现，代码更简洁、兼容性更好，不需要写任何JS即可实现响应式排列：

1. 删除所有控制布局的JS代码
2. 删除CSS里和浮动、JS设置宽度相关的冗余规则，添加以下布局代码：

.align-center {
  width: 85%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
}
.column-G3-outside {
  width: 32%;
}
/* 移动端适配 */
@media screen and (max-width: 767px) {
  .column-G3-outside {
    width: 100%;
  }
}

该实现会自动适配视口尺寸变化，不存在高度塌陷问题，三列间距、宽度自适应更稳定。

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