首行不顶端对齐是因为float使卡片脱离文档流，顶部无统一基准；应改用flex布局（display: flex; flex-wrap: wrap; align-items: flex-start），并约束图片尺寸与文字溢出。
浮动卡片流中为什么首行不顶端对齐
因为float让卡片脱离文档流，每张卡片按自身内容高度撑开，没有统一的垂直参考线。浏览器不会为浮动元素自动对齐顶部——它只保证“左/右边缘贴边”，顶部完全由各自内容决定。常见现象是：标题短的卡片看起来“上浮”，标题长的被往下压，视觉上首行参差。
用display: flex替代float是最直接解法
别再给父容器设float: left或混用inline-block，改用 Flex 布局能天然控制对齐基准：
- 父容器加
display: flex; flex-wrap: wrap; - 所有卡片设
align-self: flex-start;（或统一在父容器设align-items: flex-start;） - 确保卡片内部没用
position: absolute或float破坏布局上下文 - 图片必须加
max-width: 100%; height: auto;，否则会撑破高度基准
如果必须保留float，只能靠vertical-align模拟
这是权宜之计，仅适用于卡片高度差异不大、且能接受轻微错位的场景：
- 把卡片改为
display: inline-block;而非float，然后加vertical-align: top; - 父容器设
font-size: 0;消除inline-block间的空白 - 每个卡片内重置
font-size: 16px;，避免文字缩成点 - 不能同时用
float和vertical-align——后者对浮动元素无效
文字溢出和图片尺寸是隐形破坏者
即使对齐代码写对了，这两点常让效果白费：
- 卡片内长文本没截断：
white-space: normal; overflow: hidden;配合display: -webkit-box; -webkit-line-clamp: 2;才保险 - 图片没约束宽高：一张
500px × 800px的图会直接顶高整张卡片，让flex-start失去意义 - 卡片本身设了
height但没配min-height：内容少时留白过大，内容多时溢出，对齐基准就乱了
真正卡住对齐效果的，往往不是align-items写错，而是卡片内部某张图、某段没截断的文字，悄悄抬高了整个基线。检查时优先看这些地方，比反复调margin更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
