页面嵌入视频排版异常求助：文本未上下排布却并排显示

我尝试在页面中嵌入一段视频，希望文本显示在视频的上方和下方，但目前文本却出现在视频的侧边。

使用的代码如下：

<p>Here is a quick "how to" video to show you how it works:</p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/I6cynOuqJ3E" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></p>
<p> </p>
<p>If you have any questions or suggestions, please get in touch at <a href="mailto:workvoicepay@unitetheunion.org" title="workvoicepay@unitetheunion.org">workvoicepay@unitetheunion.org</a></p>

我试过用以下标签来修复（让嵌入式视频在上，"If you have any question..."文本在下）：

<div class="block">  
  <div class="top">stuff goes here</div>  
  <div class="bottom">more stuff</div>

还在嵌入式视频后使用了这个标签：

<p class="clear">

但两种方法都没效果，有人能帮忙解决吗？

感谢
Sam

这问题多半是你的CSS给iframe或它的父元素加了**浮动（float）**属性，导致文本自动环绕视频。试试下面几种实用方案：

方法一：直接给iframe加块级显示样式 #

强制iframe占据整行空间，不让文本挤到侧边，直接在iframe标签里加内联样式：

<p>这是一段快速演示操作的"教程"视频：</p>
<p><iframe style="display: block; width: 560px; height: 315px;" src="https://www.youtube.com/embed/I6cynOuqJ3E" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p> </p>
<p>如果有任何问题或建议，请通过邮箱 <a href="mailto:workvoicepay@unitetheunion.org" title="workvoicepay@unitetheunion.org">workvoicepay@unitetheunion.org</a> 联系我们</p>

方法二：用CSS清除浮动影响 #

如果是父元素的浮动导致的问题，给包含视频的容器加清除浮动的类，并定义对应CSS样式：

<!-- HTML代码 -->
<p>这是一段快速演示操作的"教程"视频：</p>
<p class="video-wrap"><iframe width="560" height="315" src="https://www.youtube.com/embed/I6cynOuqJ3E" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p> </p>
<p>如果有任何问题或建议，请通过邮箱 <a href="mailto:workvoicepay@unitetheunion.org" title="workvoicepay@unitetheunion.org">workvoicepay@unitetheunion.org</a> 联系我们</p>

<!-- CSS样式 -->
<style>
.video-wrap {
  clear: both;
}
.video-wrap iframe {
  display: block;
}
</style>

方法三：用Flex布局强制垂直排列 #

把视频和文本用div包裹，设置Flex布局为垂直方向，确保元素上下排列：

<div style="display: flex; flex-direction: column; gap: 15px;">
  <p>这是一段快速演示操作的"教程"视频：</p>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/I6cynOuqJ3E" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <p>如果有任何问题或建议，请通过邮箱 <a href="mailto:workvoicepay@unitetheunion.org" title="workvoicepay@unitetheunion.org">workvoicepay@unitetheunion.org</a> 联系我们</p>
</div>

你之前用的div块和clear标签没生效，大概率是没给类定义对应CSS样式，或者浮动优先级更高。上面三种方法里，方法一最直接，改完就能看到效果。

内容的提问来源于stack exchange，提问作者samstroud