浮动元素本身不支持等比例缩放，需借助padding-bottom百分比（基于父宽计算）配合position: absolute实现宽高比锁定，外层浮动容器须设width并清除浮动以防塌陷。
浮动元素本身不支持等比例缩放——float只是脱离文档流的定位方式，它不参与宽高比计算。想让浮动容器“看起来等比例”，必须靠其他 CSS 机制驱动高度，而 padding-top 或 padding-bottom 百分比是目前最兼容、最可控的手段。
为什么 padding-top 百分比能控制高度比例
因为 CSS 规定：padding-top 和 padding-bottom 的百分比值，始终基于**父容器的宽度**计算（不是高度）。这个特性被广泛用来“用宽度驱动高度”，从而实现宽高比锁定。
- 父容器必须有明确的
width（哪怕width: 100%），否则百分比 padding 无参照，会退化为 0 - 要让内容填满这个“垫高”的区域，子元素得用
position: absolute覆盖整个父容器 -
padding-top和padding-bottom效果一致，但用padding-bottom更常见——避免与顶部 margin 冲突，也更符合“预留底部空间”的语义
浮动容器里用 padding 实现等比的实操要点
你不能直接对浮动元素设 padding-bottom 并指望它撑开高度——浮动元素会忽略 padding 对布局高度的影响（除非清除浮动或触发 BFC）。正确做法是：把浮动应用在父容器上，而等比逻辑放在子容器中。
- 外层容器设
float: left+ 百分比width（如width: 50%），用于响应式并排 - 内层容器设
position: relative+width: 100%+padding-bottom: 75%（4:3 比例） - 图片或内容用
position: absolute; top: 0; left: 0; width: 100%; height: 100%覆盖 - 务必给外层浮动容器加
clearfix或overflow: hidden，否则父容器高度塌陷，padding 区域不可见
常见错误：padding 没生效 or 图片错位
这类问题几乎都源于布局上下文缺失或定位冲突：
-
padding-bottom设了但容器没高度？→ 检查父容器是否设置了width，且该宽度不是auto - 图片只显示左上角一小块？→ 子元素没设
position: absolute，或忘了top: 0; left: 0 - 多个浮动项堆叠错乱？→ 浮动容器没清除，用
.clearfix::after或临时加overflow: hidden快速验证 - 在 Flex/Grid 容器里嵌套浮动？→ 尽量避免。Flex 子项默认
align-self: stretch，会强行覆盖padding-bottom计算出的高度
现代替代方案要不要切？
aspect-ratio 确实更直观，但它在 Safari 15.3 及更早版本中服务端渲染首屏可能塌陷；而且和 height: 100%、align-items: stretch 等属性存在隐性冲突。如果你的项目需支持 iOS 15 或旧版安卓 WebView，padding-bottom 仍是上线前真机必测的兜底方案——它不依赖 JS，不触发重排，兼容到 IE9。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
