浮动卡片高度不一致导致布局错乱，clearfix伪元素可解决父容器塌陷，flex布局能实现底部对齐，js动态设minheight是兼容方案。
浮动卡片高度不一致导致布局错乱
浮动元素脱离文档流后，父容器无法自动包裹子元素，当卡片内容高度不同（比如标题行数不同、图片尺寸不一），float: left 的卡片就会“参差不齐”，下一行卡片从最高那个的底部开始贴靠，视觉上断层严重。
- 别指望
height写死——内容动态时必然失效 -
min-height只能兜底，不能解决对齐问题 - 用
clear: both清除浮动只管换行，不管高度对齐
用 clearfix + 伪元素强制父容器撑高
这是最轻量、兼容性最好（IE8+）的解法：让卡片容器自己感知所有浮动子项的高度，而不是放任它塌陷。
- 给卡片外层容器加 class：
class="card-list" - CSS 中写：
.card-list::after { content: ""; display: table; clear: both; } - 注意不要漏掉
display: table，否则clear在伪元素上无效 - IE8 需要额外加
*zoom: 1触发 hasLayout，但现代项目基本可忽略
真正对齐卡片底部要用 flex 替代 float
如果目标是“所有卡片底部严格对齐”（比如每张卡右下角都放一个统一位置的按钮），float 本身做不到，强行 hack 会越来越重。
- 把
display: flex加在卡片容器上，flex-wrap: wrap - 卡片设
flex: 0 0 auto（不伸缩、不压缩、按内容宽） - 关键一步：加
align-items: flex-end让所有卡片底部对齐 - 注意
flex在 IE10+ 才有较完整支持；若需 IE9-，老老实实用 JS 补高
用 JS 动态统一高度要避开 DOM 重排陷阱
当必须用 JS（比如兼容极老浏览器或内容异步加载），别每次插入一张卡就重算全部——性能会崩。
- 只在所有卡片渲染完后运行一次：
document.querySelectorAll(".card") - 取最大高度：
Math.max(...Array.from(cards, c => c.offsetHeight)) - 给每张卡设
style.minHeight = maxHeight + "px"，不是height，保留内容溢出空间 - 避免在
for循环里反复读取offsetHeight，先缓存再批量写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
