浮动元素高度不一致导致的“卡行”是float原始行为，非bug；clear和overflow仅缓解父容器塌陷，无法阻止卡行；display:flow-root或flex布局才是有效解法。
直接说结论：浮动元素高度不一致导致的“卡行”（即后续元素钻进前一个高元素右侧空隙），不是 bug，是 float 的原始行为逻辑；靠 clear 或 overflow 只能缓解父容器塌陷，不能阻止卡行——真正有效的是用 display: flow-root 或 display: flex 替代 float 布局。
为什么 clear: both 无法解决卡行问题
clear: both 的作用对象是「自身」，它只让当前元素下移到所有浮动项下方，但不会影响前面已浮动元素的排列逻辑。卡行发生在浮动流内部：当第一个浮动项很高、第二个很矮时，第三个会紧贴第一个的右边缘下方空白处上浮，而不是等第二行齐头开始。
- 给每个卡片加
clear: left？结果是全部垂直堆叠，失去并排意义 - 只在最后一张卡加
clear: both？对卡行完全无效，它只影响自己位置 - 用
float: left+width: 33.333%？小数精度+盒模型误差极易导致第三张掉行，和高度无关但加剧错乱
display: flow-root 是最轻量的替代方案
display: flow-root 不改变子元素的浮动行为，但它让父容器创建一个新的 BFC，从而强制按文档顺序逐行“打包”浮动项——每行浮动元素会被视为一个整体，后续浮动项必须从下一行开头起排，不再钻空隙。
- 只需加在包裹卡片的容器上：
.card-list { display: flow-root; } - 兼容性良好：Chrome 64+、Firefox 53+、Safari 10.1+、Edge 79+，2026 年已无兼容顾虑
- 比
overflow: hidden安全：不裁剪box-shadow、position: absolute子元素或弹出菜单 - 注意：它不拉齐卡片高度，只是阻止卡行；视觉对齐仍需配合
line-height和padding-bottom
用 Flex 布局彻底绕过浮动陷阱
如果目标是“多列自适应+等高+不卡行”，display: flex 是语义正确、行为可预测的解法，且代码更少、响应式更稳。
立即学习“前端免费学习笔记（深入）”；
- 单行卡片：
.card-list { display: flex; flex-wrap: wrap; gap: 16px; }+.card { flex: 1 1 calc(33.333% - 10.666px); } - 多行等高：
.card { display: flex; flex-direction: column; }+.card-content { flex: 1; }，让内容区吸满剩余空间 - 避免陷阱：
flex: 1会覆盖height，所以别再写height: 200px；若需最小高度，用min-height: 200px - IE11 兼容写法：把
flex: 1 1 auto拆成flex-grow: 1; flex-shrink: 1; flex-basis: auto;
最容易被忽略的是：卡行现象在图片未加载完成时会临时出现——因为 <img alt="如何在CSS中避免浮动元素高度不一致导致的卡行？" > 初始高度为 0，浮动流误判为空白区域。给图片加 aspect-ratio: 16/9 或 min-height: 120px 能提前占位，避免闪动错行。
