<video>被<footer>盖住是因父容器浮动未清除导致高度塌陷。应给浮动父容器触发BFC（overflow:hidden或display:flow-root）或伪元素清除，同时设video{display:block}消除基线间隙。
HTML5 <video> 元素被 <footer> 挤出视口，根本不是视频本身的问题，而是父容器浮动未清除导致的文档流塌陷。
为什么 <video> 会被 <footer> 盖住？
常见于 <video> 的父元素（比如 <section> 或 <div class="video-wrap">）内部有浮动子元素（如 <img>、<aside>），但没触发 BFC 或清除浮动，导致该父容器高度为 0。后续的 <footer> 就会直接“上浮”覆盖在视频区域上——你看到的不是视频被挤掉，是它根本没撑开空间。
清除浮动的三种可靠写法（别再用 clear: both 单独加在 <footer> 上）
单独给 <footer> 加 clear: both 只是掩盖症状，且一旦结构变化就失效。真正要修复的是浮动容器本身：
-
推荐：用
overflow: hidden（或auto）触发 BFC —— 给<video>的直接父容器加，简单有效，兼容性到 IE6 -
现代项目首选：
display: flow-root—— 专为清除浮动设计，不影响溢出行为，Chrome 64+/Firefox 62+ 支持，无副作用 -
后备方案：伪元素清除法 —— 在父容器 CSS 中加：
.video-wrap::after { content: ""; display: table; clear: both; }，兼容所有浏览器，但需确保父元素不是display: flex或grid
<video> 自身要不要设 display: block？
要，而且必须加。默认 <video> 是 inline 元素，底部会有几像素空白间隙（来自基线对齐），这会导致父容器计算高度异常，和浮动问题叠加后更难排查。只需一行：
立即学习“前端免费学习笔记（深入）”；
video { display: block; }
如果还用了 width: 100% 但高度没填满，检查是否父容器缺少 height 或 min-height——<video> 不会自动拉伸高度，除非设 height: 100% 且所有祖先都有明确高度。
容易被忽略的嵌套陷阱
当 <video> 包在 <figure> 里，而 <figure> 又被包在另一个浮动 <div> 中时，只清最外层是不够的。得逐层检查：
- 每个含浮动子项的容器，都应独立清除浮动
- 避免在同一个容器上既设
float又设flex或grid，CSS 会静默忽略float - 用浏览器开发者工具的“Layout”面板（Chrome）或“Box Model”高亮，确认
<video>父容器的实际高度是否为 0
浮动清除不是“加一个类就完事”，关键在定位哪个容器丢了高度——往往多嵌了一层，就多漏一次清除。
