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