为什么`.primary-content`外部的内容无法清除对应flex元素？

问题原因 #

1. 轮播容器高度坍缩：所有.testimonial__item均设置了position: absolute，绝对定位元素脱离文档流，导致父容器.testimonial__items无法根据子元素高度撑开，高度坍缩为0，后续的.test-flex-parent元素就会向上偏移，和轮播内容重叠。
2. 自动轮播逻辑错误：JS代码中setInterval仅传入了时间参数，未指定要执行的回调函数，自动轮播功能无法正常运行。

修复方案 #

1. 调整CSS解决重叠问题 #

给.testimonial__items添加定位属性和最小高度，撑开容器高度：

.testimonial__items {
  flex: 1;
  color: #000;
  position: relative; /* 子元素绝对定位的参照容器 */
  min-height: 600px; /* 移动端适配高度，可根据实际内容调整 */
}
@media screen and (min-width: 576px) {
  .testimonial__items {
    min-height: 320px; /* 桌面端匹配轮播最大高度 */
  }
}

2. 修复JS自动轮播逻辑 #

调整两处setInterval的写法，补充执行回调：

// 箭头点击后的定时器重置逻辑
arrows[0].addEventListener("click", function (e) {
    e = e || window.event;
    e.preventDefault();
    carouselCount -= 100;
    slider();
    if (e.type !== "autoClick") {
        clearInterval(scrollInterval);
        // 替换原错误写法：scrollInterval = setInterval(interval);
        scrollInterval = setInterval(() => {
          arrows[1].dispatchEvent(new Event('click'));
        }, interval);
    }
});

// 页面初始化的自动轮播逻辑
// 替换原错误写法：scrollInterval = setInterval(interval);
scrollInterval = setInterval(() => {
  arrows[1].dispatchEvent(new Event('click'));
}, interval);

修改完成后，轮播区域会占据正常的文档流高度，后续的h2元素就会正常显示在轮播下方，不会出现重叠。

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