浮动卡片多行错位主因是宽度失控和脱离文档流，非清除不当；display: flow-root可建立bfc解决塌陷，但底部对齐必须改用grid或flex，因float天生不支持行内对齐与高度感知。
浮动卡片多行错位，不是清除没做对，而是你在用文字环绕机制硬扛栅格布局——它天生不支持行内对齐、高度感知和换行控制。
display: flow-root 是最简有效的清除方案
给卡片容器（比如 .card-list）加 display: flow-root，就能让它建立新的 BFC，自动包裹所有浮动子项，解决父容器高度塌陷。这比 overflow: hidden 安全，不会意外裁掉 position: absolute 的下拉菜单或阴影。
- 现代浏览器全支持：
Chrome 64+/Firefox 58+/Safari 12.1+ - 别在同一个容器上同时设
height或max-height，否则会截断内容或伪元素 - 若需兼容 IE11，改用
.card-list::after伪元素 +clear: both，并补*zoom: 1支持旧版 IE
错位主因是宽度失控，不是浮动本身
浮动换行错位，90% 是因为某张卡片实际占宽超出了父容器。浏览器按像素四舍五入判断是否换行，总宽多出 1px，整行就崩。
- 必须全局设
* { box-sizing: border-box; }，否则width: 33.33%+padding会溢出 - HTML 中浮动卡片之间不要换行或空格，否则渲染器可能插入约 4px 间隙
- 用
calc()精确控宽：4 列带 12px 间隙 →width: calc((100% - 36px) / 4) - 避免
width: 33.333%这类小数，改用整数百分比 + 固定 margin 组合，留出容错空间
底部对齐这件事，float 天生做不到
哪怕你把所有卡片设成 min-height: 280px，只要内容高度不同，它们的底部就永远无法落在同一水平线。这不是参数没调准，是 float 渲染机制决定的。
-
vertical-align对浮动元素无效，别试 - 靠
padding-bottom托高短内容，能改善视觉基线，但不解决换行逻辑错位 - 真要底部对齐，必须放弃 float：用
display: grid配align-items: end，或display: flex配flex-direction: column+margin-top: auto
响应式断点里最容易被忽略的塌陷
PC 端正常，一缩到平板尺寸错位突然出现，大概率是媒体查询中忘了重置父容器的 BFC 触发方式——比如 PC 用 overflow: hidden，而响应式规则把它覆盖成了 visible。
- 检查每个断点下，卡片容器是否仍保持
display: flow-root或等效清除逻辑 - 图片加载前高度为 0，也可能临时触发错位；建议给
<img>设aspect-ratio或最小min-height - 多层卡片结构（如“推荐”“热门”“最新”）中，每层容器都得独立触发 BFC，不能只在外层清一次
真正卡住人的地方，从来不是怎么写 clear: both，而是写完发现卡片还是歪的——因为你还在指望 float 做它不该做的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
