不同高度卡片导致“错行”是因为浮动元素按文档顺序贴边排列且不自动底部对齐，当高卡片占据更多垂直空间时，后续卡片会嵌入其右侧空白区而非换行起始处，这是float渲染机制固有行为。
浮动卡片布局中，不同高度卡片会导致换行错位，这不是bug，是float的固有行为；必须用clearfix或display: flow-root包裹每一层，且不能只靠clear: both加在最后一张卡片后。
为什么不同高度卡片会让浮动布局“错行”
浮动元素按文档顺序依次贴边排列，但不会主动“对齐底部”。当第一行第三张卡片比前两张高很多时，第四张卡片会尝试紧贴第一张卡片下方的空白区域，而不是从下一行开头排起——这就是所谓的“圣杯错位”。它和父容器塌陷无关，是float渲染规则本身决定的。
- 不是所有浏览器都表现一致，尤其IE旧版本更明显
- 仅靠给卡片设
height强行拉齐不现实：内容长度不可控，响应式下更难维护 -
vertical-align对float无效，别试
必须为每层浮动容器单独清除浮动
多层卡片结构（比如“推荐栏”+“热门栏”+“最新栏”）中，如果只在最外层加clearfix，内层仍会塌陷并互相干扰。错误写法：<div class="page"><div class="card-group">...</div></div>，只给.page加clearfix。
- 正确做法：每个
.card-group都独立加clearfix类，或统一设display: flow-root -
display: flow-root比overflow: hidden更安全——不裁剪阴影、下拉菜单等溢出内容 - 若需兼容IE11及以下，用
.clearfix::after方案，并补*zoom: 1支持IE6–7
卡片宽度与margin配合要避开盒模型陷阱
设width: 30% + margin: 1.5%看似三列刚好占满，但默认box-sizing: content-box时，border和padding会额外撑宽，导致第三张卡片被挤到下一行。
- 务必全局重置：
* { box-sizing: border-box; } - 避免用
calc(33.333% - 2px)这类计算值：小数精度+渲染差异易出错 - 推荐组合：
width: 30%; margin: 1.5%;，总占用3 × (30% + 1.5% + 1.5%) = 100%，留出容错空间
现代项目里该不该用float做卡片布局
应该明确：float不是“过时”，而是“场景退场”。它在需要兼容IE8–9的老系统、或极简静态页中仍有价值；但新项目中，display: flex配flex-wrap: wrap或display: grid能天然规避高度错位、无需清除、响应式更可控。
- 用float时，
clear只解决塌陷，不解决错行——错行得靠JS重排或CSS多列（column-count）等变通方案 - 真正容易被忽略的点：图片加载完成前高度为0，可能临时触发错位；建议给
<img>设aspect-ratio或最小min-height
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
