我在CSS中使用float，並使用clear：both。但浮動後的元素跳轉頂部

Question

我有.container-for-all-videos與min-height和height自動。我給了這個容器clear:both。在這個容器裏，我有很少的.container-for-video和float。 當我有人格與div後。這個小時跳到最上面。它保持在最小距離（容器對所有視頻）的距離，如果它小於視頻採取小時跳躍。 我不知道會有多少視頻。所以，我需要.container-for-all-videos靈活並且在它之後

---

。 （我不能使用flex，因爲我必須支持舊的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

給出明確的階級的CSS和所有的視頻格之後添加<div class="clear"></div>。

.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>