元素未被取出文档流

Question

嗨，大家好我有一个我不太懂的CSS问题。通常当你浮动div时，它们会被从文档流中取出。因此，例如，如果你有两个div并且你将其中一个浮动，那么它下面的那个将会＃34;出现＆＃34;好像第一个从未存在过。

例如我有

<div>
    <div class="" style="float:right; width:95%; background:red; height:400px;">

    </div>
    <div class="" style="width:200px; height:200px; background:yellow">
      hi
    </div>
</div>

然后黄色框已经到达顶部，好像红色框从未存在过一样。 到目前为止一切顺利。

我不明白的是，如果我将一个视频元素放在黄色框内，那么即使我强制它被渲染为一个块元素，它也不会位于文档流之外。

例如

<div>
    <div class="" style="float:right; width:95%; background:red; height:400px;">

    </div>
    <div class="" style="width:200px; height:200px; background:yellow">
      <video autoplay muted playsinline style="width:70%; display:block;">
        <source src="https://player.vimeo.com/external/236872382.hd.mp4?s=ac279f17c02a3262e748ebc2920b85f68740c7c1&profile_id=174" type="video/mp4">
      </video>
    </div>
</div>

例如，视频在红色块下面呈现。 为什么视频（蓝色徽标动画）不会忽略浮动的红色块？

感谢您的帮助！

Answer 1

问题在于宽度。视频元素的宽度太小。您可以更新宽度。

＆＃13;

＆＃13;

<div>
  <div class="" style="float:right; width:80%; background:red; height:400px;">

  </div>
  <div class="" style="width:20%; height:400px; background:yellow">
    <video autoplay muted playsinline style="width:100%; display:block;">
        <source src="https://player.vimeo.com/external/236872382.hd.mp4?s=ac279f17c02a3262e748ebc2920b85f68740c7c1&profile_id=174" type="video/mp4">
      </video>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;