浮动元素本身不支持等比例缩放，需通过外层浮动容器设width并清除浮动、内层relative定位加padding-bottom百分比（如16:9为56.25%）、内容absolute铺满来实现；直接对浮动元素设padding-bottom无效，因其不参与高度计算。
浮动元素本身不支持等比例缩放——float只是脱离文档流的定位方式，它不参与宽高比计算。想让内容“看起来等比”，必须靠外部容器占位 + 内部绝对定位填充，padding-bottom百分比是目前最稳的手段。
为什么直接给浮动元素设 padding-bottom 不生效
因为浮动元素会忽略 padding 对布局高度的影响，除非它已触发 BFC 或被清除浮动。常见错误现象：父容器高度塌陷、内容只显示左上角一小块、整个区域空白。
- 浮动元素设了
padding-bottom: 75%，但高度没撑开 → 实际是 padding 没参照：父容器没设width（哪怕width: 100%） - 图片错位或只露一角 → 子元素没加
position: absolute; top: 0; left: 0; - 多个浮动项堆叠混乱 → 外层容器没清除浮动，可用
overflow: hidden快速验证
padding-bottom 百分比怎么算出正确值
数值 = 高 ÷ 宽 × 100%，不是凭感觉填。填错一点，缩放时就会挤压或留黑边。
- 16:9 →
padding-bottom: 56.25%（9 ÷ 16 = 0.5625） - 4:3 →
padding-bottom: 75%（3 ÷ 4 = 0.75） - 1:1 →
padding-bottom: 100% - 21:9（超宽屏）→
padding-bottom: 42.857%（9 ÷ 21 ≈ 0.42857）
浮动容器里嵌套等比结构的正确写法
不能把 float 和等比逻辑混在同一层。必须分层：外层浮动控制排列，内层相对/绝对定位实现比例。
- 外层浮动容器：设
float: left; width: 50%;（响应式并排），并加overflow: hidden或clearfix防塌陷 - 内层包裹盒：设
position: relative; width: 100%; padding-bottom: 75%; - 实际内容（
img/video/iframe）：设position: absolute; top: 0; left: 0; width: 100%; height: 100%;，再加object-fit: cover或border: none; margin: 0;
现代方案 aspect-ratio 能不能直接替代
能，但不能无脑切。Safari 15.0–15.3 在服务端渲染首屏时可能忽略该属性，导致卡片塌陷；且和 height: 100%、align-items: stretch 等存在隐性冲突。
如果你的项目要上线，且需兼容 iOS 15 或旧版安卓 WebView，padding-bottom + absolute 仍是真机必测的兜底方案——它不依赖新特性，也不受 Flex/Grid 容器收缩逻辑干扰。而 aspect-ratio 更适合纯现代环境下的快速原型或内部系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
