はNGリピートとフロートとの重複：私はNGリピート経由<code>div</code>秒の2つの行を取得しようとしています

Question

を残しました。 すべてdivはfloat: left属性を持ち、最後にdivをclear: bothに置きます。

<div class="interval" ng-repeat="interval in intervals"> 
    <div class="text-center"> 
      <h2>{{interval}}</h2> 
      <i class="fa fa-angle-down fa-2x"></i> 
    </div> 
</div> 
<div class="clearfix"></div> 
<div class="interval" ng-repeat="interval in intervals"> 
    <div class="testBar progress"> 
     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
       <span class="sr-only">60% Complete</span> 
     </div> 
    </div> 
</div> 
<div class="clearfix"></div> 

とCSS：https://jsfiddle.net/uyrxd4ag/2/

しかし、これらの2つの行が何らかの形で重なっ：

.interval { 
    width: 500px; 
    height: 50px; 
    float: left; 
} 

はこちらを参照してください。しかし、なぜ私はclear: both divがこれを防ぐべきであるか分からない。

どうすればいいですか？

Answer 1

あなたの間隔のdivはは50pxの高さは、最初の行の見出しが第二の行と重複そのように固定されています。固定高さを削除すると、高さが正しく計算されます。