我在 css 中使用 float 并且我使用 clear: 两者。但是float的元素之后的div跳到了最上面

Question

我有 .container-for-all-videos，min-height 和 height 自动。我给了这个容器clear:both。在这个容器中，我几乎没有带浮动的 .container-for-video。在我和 hr 有 div 之后。这个小时跳到最上面。它保持距离最小高度（所有视频的容器），如果它小于视频 - 小时跳跃。我不知道会有多少视频是肯定的。所以，我需要 .container-for-all-videos flexible 并且在它之后

。（我不能使用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

清除class的css并在所有视频div之后添加<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>

我在 css 中使用 float 并且我使用 clear: 两者。但是float的元素之后的div跳到了最上面

I use float in css and I use clear: both. But divs after float's element jump on top

html

css

css-float