我在CSS中使用float并使用clear：both。但浮动元素跳转后的div

Question

我有.container-for-all-videos min-height和height自动。我把clear:both给了这个容器。在这个容器中，我有几个.container-for-video with float's。 我用hr后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之后添加<div class="clear"></div>。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;