我在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>