Clearfix在带视频的div上不起作用

debugcn 发表于 Dev

乔治

我尝试了很多不同类型的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无法正常工作？

Baconbeastnz

您误解了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; }

在小提琴中展示。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。