用 padding-top 实现响应式视频比例是因为其百分比基于父宽计算，可替代 height 百分比；需清除浮动防塌陷，父容器设 relative，视频绝对定位填满。
为什么用 padding-top 实现响应式视频比例
因为 height 无法直接设为百分比（相对于父容器宽度），但 padding 的百分比值是相对于父容器宽度计算的。浮动布局中父容器常塌陷，而 padding-top 能“撑开”高度且不破坏流式结构，视频再用绝对定位填满这个预留空间即可保持宽高比。
浮动容器必须清除塌陷，否则 padding 不生效
浮动元素脱离文档流，父容器高度坍缩为 0，此时即使设置了 padding-top: 56.25%，实际高度也为 0。必须让父容器感知子元素尺寸：
- 给父容器加
overflow: hidden或overflow: auto - 用伪元素清除浮动：
::after { content: ""; display: table; clear: both; } - 避免只依赖
float布局，现代项目建议改用display: flex或display: grid，但若需兼容老代码，清除塌陷是前提
padding-top 值怎么算：16:9 是 56.25%，4:3 是 75%
公式就是 height / width × 100%。常见比例对应值：
16:9 → 9 / 16 = 0.5625 → 56.25%4:3 → 3 / 4 = 0.75 → 75%21:9（超宽屏）→ 9 / 21 ≈ 42.857%
注意：不要写成 padding: 56.25% 0 0，必须用 padding-top 单独设置，否则左右 padding 会影响宽度计算。
视频元素必须绝对定位并拉满容器
仅靠 padding 撑高还不够，<iframe></iframe> 或 <video></video> 默认是行内元素，会受行高、文字基线影响，必须用定位覆盖：
- 父容器设
position: relative - 视频元素设
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 如果视频有默认边框或内边距，加
border: none和margin: 0
示例关键 CSS：
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
overflow: hidden;
}
.video-wrapper iframe,
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
浮动布局下最易忽略的是父容器塌陷和 padding 计算基准——它只认父容器宽度，跟子元素无关。一旦忘记清除浮动，整个比例就失效，调试时先检查父容器是否真有高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
