Clearfixがビデオ付きのdivで動作しない

Question

私は多くの種類のクリアフィックスを試しましたが、どれも動作していません。私はそれの前にテキストを持っているフル幅のビデオヘッダーを作ろうとしていますが、それを下にスクロールすることもできます。これは私が持っているものです。

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がビデオの高さよりもかなり短いため、現在は表示されません。

なぜ私のクリアフィックスは機能しませんか？

Answer 1

あなたはclearfixの目的を誤解しています。これは、コンテナがフローティングされた子を適切にカプセル化できるようにするためのものです。 （絶対的に配置された子供ではない）。

要素を絶対的に配置するときは、ドキュメントフローから取り除くため、要素を動的に含む方法はありません（javascriptを除く）。あなたの子供の高さ（ ）に合わせて、容器の高さを明示的に設定する必要があります。

fiddleで実証

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

：へ

変更コード。