aspect-ratio 单独作用于浮动图片无效，因其仅约束自身宽高比，不解决浮动脱离文档流导致的父容器塌陷和列高不一致问题；需配合浮动项设 aspect-ratio、清除浮动及现代布局方案。
浮动布局本身无法实现真正等高，aspect-ratio 也不能直接修复 float 的脱离文档流问题——它只对自身尺寸生效，对兄弟元素高度无影响。 想靠 aspect-ratio 让浮动图片“看起来等高”，必须配合其他机制，否则列高仍由内容决定，父容器依然塌陷。
为什么 aspect-ratio 单独加在浮动图片上没用
给 .image-item img { aspect-ratio: 4/3; } 只会约束单张图的宽高比，但不会拉齐所有浮动项的高度。因为：
- 浮动元素彼此不感知高度，
aspect-ratio不触发 BFC，也不参与父容器高度计算 - 父容器仍因 float 脱离文档流而高度为 0，
overflow: hidden裁剪后，各列实际高度仍是各自内容撑开的值 - 如果图片原始尺寸差异大，
aspect-ratio仅改变单图渲染比例，列块（.image-item）本身没有统一高度基准
如何让 aspect-ratio 在浮动中“起效”
必须把 aspect-ratio 和显式高度控制结合，且确保父容器能正确包裹：
- 给每个浮动项（不是图片）设
aspect-ratio，例如.image-item { aspect-ratio: 4/3; }，再配width: 25%; float: left; - 同时加
min-height: 0;防止旧版 Chrome 对aspect-ratio的 fallback 行为异常 - 父容器必须清除浮动：推荐用伪元素
.container::after { content: ""; display: table; clear: both; }，而不是仅靠overflow: hidden—— 后者在有下拉菜单时会意外裁剪 - 若需响应式，
aspect-ratio可配合媒体查询切换：@media (max-width: 768px) { .image-item { aspect-ratio: 1/1; } }
比浮动 + aspect-ratio 更靠谱的组合
如果你的目标是“图片等高排列”，现代方案几乎总是优于浮动：
立即学习“前端免费学习笔记（深入）”；
-
display: flex+aspect-ratio：父容器display: flex; flex-wrap: wrap;，子项设flex: 1 0 25%; aspect-ratio: 4/3;，自动等高且响应式友好 -
display: grid+aspect-ratio：用grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，子项直接aspect-ratio: 4/3;，高度由 grid track 统一控制 - 纯
aspect-ratio+object-fit：图片设width: 100%; height: 100%; object-fit: cover;，再配合容器等高（如 flex），这才是可控的等高逻辑
真正容易被忽略的点是：aspect-ratio 的兼容性虽好（Chrome 88+、Firefox 89+、Safari 15.4+），但在 IE 和部分安卓 WebView 中完全无效；而浮动布局叠加 aspect-ratio 的写法，既没解决根本塌陷问题，又增加了调试复杂度——不如一步到位换用 flex 或 grid。
