float 失效主因是父容器未清除浮动或触发 BFC，video 需显式设 width 且避免被 overflow:hidden、flex 等隐式 BFC 截断；推荐 flex 或 grid 替代。
视频和文字并排时 float 失效的常见原因
直接给 <video> 加 float: left，文字没绕过来？大概率是父容器没清除浮动，或者视频默认是行内替换元素但高度撑不开、文字被“挤到下一行”。更常见的是：现代浏览器里 float 对 <video> 的包裹行为不一致——尤其当它有 controls 或设置了 width 后，可能触发 BFC 导致文字无法环绕。
实操建议：
- 确保父容器没有
overflow: hidden或display: flex等会隐式创建 BFC 的属性，否则浮动会被截断 -
<video>必须显式设置width（比如width: 320px），不能只靠height或留空，否则浮动基准不可控 - 文字容器（如
<p>）不要设clear: both，也别用display: block强制换行
用 float 实现并排的最小可行代码
不是写一堆 class，而是删到只剩必要部分。下面这段能跑通：
<div style="font-size: 14px;">
<video controls width="320" height="180" style="float: left; margin-right: 12px;">
<source src="demo.mp4" type="video/mp4">
</video>
<p>这是跟视频并排的文字说明。它会自动绕在右侧，只要 video 有明确 width 且没被父级 BFC 拦住。</p>
</div>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
float: left必须写在<video>标签上，不是外层 div -
margin-right是为了留白，不然文字贴太紧；数值建议用 px，避免 rem/em 在浮动中计算错位 - 不需要给
<p>加任何样式，让它自然流式布局即可
为什么现在不推荐新手主用 float 布局视频+文字
因为 float 本质是为图文混排设计的，不是为组件对齐。一旦加响应式、换行、或后面接其他块级元素，就容易出现父容器高度塌陷、文字突然跳到下方、移动端错位等问题。
更稳妥的替代路径：
- 纯静态小页面：用
display: inline-block+vertical-align: top，比 float 更可控 - 需要适配手机：改用
display: flex，给父容器加display: flex; align-items: flex-start，video 和文字作为子项 - 内容为主、视频为辅：考虑
grid-template-columns: 320px 1fr，语义清晰，换行逻辑明确
float 下视频尺寸异常、文字不换行的调试步骤
遇到文字卡在视频正下方不动，先别改 CSS，按顺序查这几处：
- 打开开发者工具，选中
<video>，看 computed 样式里float是否生效（值是left还是none） - 检查
<video>的实际渲染宽度——如果显示为0px或远小于设置值，说明资源未加载或src错误，float失去锚点 - 右键文字段落 → “检查元素”，看它的
display是不是意外变成table或flex - 临时给父容器加
border: 1px solid red，确认它是否真的包裹了 video 和文字；如果只包住 video，说明浮动已溢出，要加overflow: auto或伪元素清除
浮动本身没淘汰，但它对媒体元素的容错率低，稍有不慎就失效。真正难的不是写那行 float: left，而是判断什么时候不该用它。
