Clearfix 无法处理包含视频的 div

Question

我尝试了很多不同类型的 clearfixes，但 none 都有效。我正在尝试制作前面有文本的 full-width 视频 header，但您也可以向下滚动它。这就是我所拥有的：

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 的目的，它是为了确保容器能够正确封装它们的浮动 children。（不是绝对定位children）。

当您绝对定位一个元素时，您会将其从文档流中移除，因此无法动态包含它（不包括 javascript）。您将必须明确设置容器的高度以匹配 child ().

的高度

将代码更改为：

<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; }

在fiddle中展示。

Clearfix 无法处理包含视频的 div

Clearfix not working on div with video in it

html

css

clearfix