J'utilise float dans css et j'utilise clear: both. Mais divs après l'élément du flotteur sauter en haut

Question

J'ai .container-for-all-videos avec min-height et height auto. J'ai donné clear:both à ce conteneur. Dans ce conteneur, j'ai quelques .container-for-video avec float. Après avoir div avec hr. Cette heure saute au sommet. Il reste sur la distance min-hight (conteneur pour toutes les vidéos), et s'il est plus petit que les vidéos, il saute. Je ne sais pas combien de vidéos seront sûres. Donc, j'ai besoin de .container-for-all-videos flexible et après

---

. (Je ne peux pas utiliser flex, parce que je dois supporter vieux IE).

.container-for-all-videos{  
 
    clear: both; 
 
    width: 100%; 
 
    margin-top: 30px; 
 
    min-height: 850px; 
 
    height: auto; 
 
} 
 
.container-for-video{ 
 
    margin: 10px; 
 
    width: 46%; 
 
    height: auto; 
 
    text-align: center; 
 
} 
 
.container-for-video:nth-child(odd){ 
 
    float: left;  
 
} 
 
.container-for-video:nth-child(even){ 
 
    float: right;  
 
} 
 
.container-for-video h4{ 
 
    margin-top: 10px; 
 
} 
 
hr{ 
 
    display: block; 
 
    margin-top: 40px; 
 
    margin-bottom: 50px;   
 
    border:none; 
 
    height: 3px; 
 
    background-color: #61c2ee; 
 
}

<div class="container-for-all-videos"> 
 
      <div class="container-for-video"> 
 
       <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
        <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
       </video> 
 
       <h4>About video</h4> 
 
      </div> 
 
      <div class="container-for-video"> 
 
       <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
        <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
       </video> 
 
       <h4>About video</h4> 
 
      </div> 
 
      <div class="container-for-video"> 
 
       <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
        <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
       </video> 
 
       <h4>About video</h4> 
 
      </div> 
 
      <div class="container-for-video"> 
 
       <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
        <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
       </video> 
 
       <h4>About video</h4> 
 
      </div> 
 
      <div class="container-for-video"> 
 
       <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
        <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
       </video> 
 
       <h4>About video</h4> 
 
      </div> 
 
      <div class="container-for-video"> 
 
       <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
        <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
       </video> 
 
       <h4>About video</h4> 
 
      </div> 
 

 
     </div> 
 
     <div> 
 
      <hr> 
 
     </div>

Answer 1

Donnez de la classe css claire et ajouter <div class="clear"></div> après tout div vidéo.

.container-for-all-videos{   
 
    width: 100%; 
 
    margin-top: 30px; 
 
    min-height: 850px; 
 
    height: auto; 
 
} 
 
.container-for-video{ 
 
    margin: 10px; 
 
    width: 46%; 
 
    height: auto; 
 
    text-align: center; 
 
} 
 
.container-for-video:nth-child(odd){ 
 
    float: left;  
 
} 
 
.container-for-video:nth-child(even){ 
 
    float: right;  
 
} 
 
.container-for-video h4{ 
 
    margin-top: 10px; 
 
} 
 
hr{ 
 
    display: block; 
 
    margin-top: 40px; 
 
    margin-bottom: 50px;   
 
    border:none; 
 
    height: 3px; 
 
    background-color: #61c2ee; 
 
} 
 
.clear{ 
 
    clear:both; 
 
}

<div class="container-for-all-videos"> 
 
    <div class="container-for-video"> 
 
     <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
      <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
     </video> 
 
     <h4>About video</h4> 
 
    </div> 
 
    <div class="container-for-video"> 
 
     <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
      <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
     </video> 
 
     <h4>About video</h4> 
 
    </div> 
 
    <div class="container-for-video"> 
 
     <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
      <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
     </video> 
 
     <h4>About video</h4> 
 
    </div> 
 
    <div class="container-for-video"> 
 
     <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
      <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
     </video> 
 
     <h4>About video</h4> 
 
    </div> 
 
    <div class="container-for-video"> 
 
     <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
      <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
     </video> 
 
     <h4>About video</h4> 
 
    </div> 
 
    <div class="container-for-video"> 
 
     <video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> 
 
      <source src="videos/video-soccer_2.mp4" type="video/mp4" /> 
 
     </video> 
 
     <h4>About video</h4> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div> 
 
<div> 
 
    <hr> 
 
</div>