video默认inline但不响应text-align，可靠方案是父容器text-align:right+video设inline-block，或父容器用flex+justify-content:flex-end。
video 标签默认是 inline 元素，但不换行 ≠ 自动靠右
很多人试过直接给 <video> 加 style="float:right" 或 text-align:right，发现没效果——因为 text-align 只对 inline 内容起作用，而 <video> 虽然是 inline 元素，但它有固有宽高，且父容器默认不触发 BFC，导致对齐行为不可控。
真正可靠的做法是用 display: inline-block 配合父容器的 text-align: right，或者更现代的 display: flex。
用 inline-block + text-align:right 实现靠右不换行
这是兼容性最好、最贴近“新手入门”需求的方案，不需要额外包裹或 JS。
- 给
<video>设置display: inline-block（否则它虽是 inline，但不响应text-align的对齐） - 给它的**直接父容器**（比如
<div>）设置text-align: right - 确保父容器宽度足够，否则
inline-block元素可能被挤到下一行（即使只一个元素）
<div style="text-align: right;">
<video controls width="320" height="180" style="display: inline-block;">
<source src="demo.mp4" type="video/mp4">
</video>
</div>
为什么 float:right 容易出问题？
float 会让元素脱离文档流，后续内容会环绕它，而且在弹性布局或响应式场景中极易引发高度塌陷、错位、移动端适配失败等问题。
立即学习“前端免费学习笔记（深入）”；
- 如果父容器没有清除浮动（
clear:both或overflow:hidden），高度可能变成 0 -
float不受text-align控制，也不响应 flex 或 grid 布局，后期维护成本高 - 现代项目中，
float已基本被flex和grid取代，仅用于文字环绕等极少数场景
更简洁的现代写法：flex 布局
如果只需靠右、不换行、且兼容 IE11+，flex 是更干净的选择：
- 父容器设
display: flex和justify-content: flex-end - 无需改
<video>的 display 类型，它自动成为 flex item - 加
flex-shrink: 0防止视频在窄屏下被压缩（可选）
<div style="display: flex; justify-content: flex-end;">
<video controls width="320" height="180">
<source src="demo.mp4" type="video/mp4">
</video>
</div>
注意：flex 默认是单行，所以“不换行”天然满足；但若父容器太窄，视频本身会溢出而非折行——这点和 inline-block 行为一致，只是控制逻辑不同。
