轮播图中禁用float布局，因其导致高度塌陷、overflow: hidden失效、响应式错乱及动画卡顿；应改用position: absolute叠放或flex+transform方案，并严格满足定位前提与精度控制要求。
为什么轮播图里别用 float 布局
用 float 把图片横向排开，看似简单，实则埋雷。一旦容器高度塌陷、父元素没清除浮动，overflow: hidden 就失效，滑出的图片直接露出来；更麻烦的是，float 触发文档流重排，后续用 margin-left 动画切换时，浏览器必须反复计算布局，卡顿肉眼可见。
常见翻车现场：
- 图片加载慢或失败，
float元素高度为 0，整个轮播区域缩成一条线 - 响应式缩放时，
float宽度计算错乱，图片错位或重叠 - 移动端 touch 滑动时，
float元素对transform的 GPU 加速支持差，动画掉帧
position: absolute 叠放图片的硬约束
把所有 .carousel-item 设为 position: absolute，再统一用 top: 0; left: 0; 对齐，是目前最稳的显隐控制方式。但必须满足三个前提，缺一不可：
- 父容器（如
.carousel-inner）必须设position: relative或position: absolute，否则子元素会相对于 body 定位 - 所有
.carousel-item需显式设宽高（不能依赖内容撑开），否则transform位移距离算不准 - 当前激活项要加
z-index: 2，其他项统一设z-index: 1，避免快速切换时出现“闪现旧图”
display: flex 横向排列 + transform 位移的注意事项
如果坚持用 flex 横向铺开所有图片（比如做 swipe 滑动场景），关键不是“能不能用”，而是“怎么控精度”。getBoundingClientRect().width 必须在每次 resize 后重新读，不能缓存初始值——因为字体加载、缩放、iframe 嵌套都可能改变实际宽度。
容易忽略的细节：
- flex 容器要设
flex-shrink: 0，防止图片被压缩变形 - 每张图外层
.carousel-item必须设固定flex-basis（如flex-basis: 100%），不能只靠内容宽度 - 位移计算用
currentIndex * itemWidth，但 itemWidth 要包含gap（如果有），否则滑到第二张就偏了
移动端 touch 事件下定位失效的典型原因
在手机上滑动轮播图，经常出现“手指松开后停在半路”或“划一下跳两张”，问题往往不在逻辑，而在定位依据错了：
- 用
clientX算偏移量时，没减去touchstart时的基准值，导致斜向滑动误判方向 - 没在
touchmove里调e.preventDefault()，页面跟着上下滚动，clientX值被干扰 - 松手瞬间读取的
translateX是 CSS 字符串（如"-300px"），直接参与计算会变成NaN，得先用parseFloat提取数值
最常被跳过的一步：所有定位相关计算（宽度、偏移、吸附阈值）必须在同一个渲染帧内完成，否则 layout thrashing 会让滑动粘滞或跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
