clearfix在其中不使用视频在div上工作

Question

我尝试了许多不同类型的clearfix，但没有一个可用。我正在尝试制作一个带有文字的全宽视频标题，但是您也可以向下滚动。这就是我所拥有的：

html：

<div>
    <div style="width: 100%; position: relative;" class="video-container clearfix">
        <video autoplay loop style="width: 100%; position: absolute; top: 0px; left: 0px;">
            <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
            <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
        </video>
        <div class="col-md-12" style="text-align: center;">
            <h1>HI</h1>
            <h1>HI</h1>
            <h1>HI</h1>
        </div>
    </div>
    <div>
        <h3>TEST</h3>
        <h3>TEST</h3>
        <h3>TEST</h3>
    </div>
</div>

CSS：

.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}

我希望HI的出现在视频的前面（有效），但我希望TEST的出现在视频下面，但现在不是因为video-container比视频高度短得多。

为什么我的clearfix不起作用？

Answer 1

您误解了clearfix的目的，它旨在确保容器能够正确封装其漂浮的孩子。（不是绝对定位的孩子）。

当您绝对定位元素时，您将其从文档流中取出，因此无法动态包含它（不包括JavaScript）。您将必须明确设置容器的高度以匹配您的孩子的高度（）。

将代码更改为：

<div>
    <div class="video-container row">
        <video class="col-md-12">
          <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
          <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
        </video>
        <div class="overlay">
            <h1>HI</h1>
            <h1>HI</h1>
            <h1>HI</h1>
        </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <h3>TEST</h3>
        <h3>TEST</h3>
        <h3>TEST</h3>
      </div>
    </div>
</div>
.overlay {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  text-align: center;
} 
.video-container { position: relative; }

在小提琴中演示。