购物车按钮与商品列表重叠是因为浮动导致父容器高度塌陷，需在直接父容器上用clearfix清除浮动或改用flex布局。
按钮重叠不是按钮本身的问题，而是它所在的容器被浮动元素撑塌了——父容器高度为 0，导致后续按钮“掉进”前面浮动内容的视觉空间里。必须清除浮动影响，否则加再多 margin 或 z-index 都是治标不治本。
为什么购物车按钮会和商品列表重叠？
典型场景：商品卡片用 float: left 排列，下方「加入购物车」按钮紧跟着写在 HTML 里，但没做任何清除处理。结果父容器（比如 .product-list）高度塌陷，按钮直接“浮”到第一行商品下方，视觉上像叠在一起。
- 这不是 CSS 层叠顺序问题，
z-index无效——因为按钮和商品仍在同一文档流层级，只是父容器“看不见”子元素了 -
float本意是图文环绕，不是布局工具；用它排商品列表，就注定要面对清除问题 - 常见错误是给按钮自己加
clear: both，但它只影响自身外边距，不修复父容器塌陷
给父容器加 .clearfix 类是最稳解法
把清除逻辑绑定在商品列表的直接父容器上，不改 HTML 结构，兼容 IE8+，且不会意外裁剪下拉菜单或阴影。
- 在 CSS 中定义：
.clearfix::after { content: ""; display: table; clear: both; } - 确保该类加在包裹所有浮动商品的容器上，例如：
<div class="product-list clearfix"> <div style="float:left">商品1</div> <div style="float:left">商品2</div> </div>
- 不要用
display: block替代display: table——前者在某些旧版浏览器中无法触发 BFC，清不干净 - 如果项目还需支持 IE6/7，额外加
*zoom: 1到同一样式块里
慎用 overflow: hidden 清除父容器
虽然一行 CSS 就能“看起来”修复塌陷，但副作用真实存在，尤其对购物车这种常带下拉、动画、弹窗的交互区域。
-
overflow: hidden不是清除浮动，是强制创建 BFC 包裹内容——代价是裁剪所有溢出部分 - 购物车按钮若带 Tooltip 或点击后展开的规格选择面板，一旦超出父容器边界就会被截断
- 配合
transform做入场动画时，在部分 Chrome 版本中可能触发渲染错位 - 若父容器本身需要横向滚动（如轮播商品图），此方案直接失效
真正一劳永逸：用 display: flex 替代浮动
如果你的项目目标浏览器支持 Chrome 29+/Firefox 28+/Safari 10.1+（基本覆盖全部现代环境），直接放弃 float 是最省心的选择。
- 把商品列表容器设为
.product-list { display: flex; flex-wrap: wrap; gap: 16px; }，子项自动排列，父容器高度天然正确 - 「加入购物车」按钮放在列表之后，不再受浮动干扰，也不需要任何
clear或clearfix - 响应式更直观：用
flex: 1控制自适应宽度，@media下改flex-direction即可切单列 - 注意 Safari 旧版本对
align-items默认值解析不一致，建议显式写align-items: stretch
浮动清除的本质不是“修 bug”，而是补救一个已过时的布局模式。真正容易被忽略的点是：你清除的从来不是浮动本身，而是它导致的父容器高度丢失——所以一切操作都必须作用于浮动元素的**直接父容器**，而不是按钮、不是 body、更不是浮动元素自己。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
