Clearfix not working on div with video in it

Question

I have tried a lot of different types of clearfixes but none are working. I am trying to make a full-width video header that has text infront of it, but you can scroll down past it as well. This is what I have:

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

I want the HI's to appear in front of the video (which works) but I want the TEST's to appear below the video but right now they do not because the video-container is a lot shorter than the video height.

Why is my clearfix not working?

Answer 1

You are misunderstanding the purpose of clearfix, it is intended to ensure containers can properly encapsulate their floated children. (not absolutely positioned children).

When you absolutely position an element you take it out of document flow, so there is no way to dynamically contain it (excluding javascript). You will have to explicitly set the height of your container to match the height of your child ().

Change code to:

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

Demonstrated in fiddle.