なぜ動作しないのですか？両方ですか？

ここで私はcountが各*IDクラスの下に移動することを期待していましたが、それは起こりません。各*IDとそれに対応するcountは同じ行にあります。これを修正するにはどうすればよいのですか？なぜ動作しないのですか？両方ですか？

<div class="statusInfo"> 
    <div class="Scribbles"> 
    <div class="ScribblesID">Scribbles</div> 
    <div class="count">100</div> 
    </div> 
    <div class="Following"> 
    <div class="FollowingID">Following</div> 
    <div class="count">100</div> 
    </div> 

    <div class="Followers"> 
    <div class="FollowersID">Followers</div> 
    <div class="count">100</div> 
    </div> 
</div>

CSS

.statusInfo { 
    position: absolute; 
    bottom: 30px; 
} 
.Scribbles { 
    float: left; 
} 
.Following { 
    float: left; 
} 
.Followers { 
    float: left; 
} 
.ScribblesID { 
    display: inline-block; 
    float: left; 
} 
.FollowingID { 
    display: inline-block; 
    float: left; 
} 
.FollowersID { 
    display: inline-block; 
    float: left; 
} 
.count { 
    display: inline-block; 
    clear: both; 
}

出典

2016-06-18 InQusitive

フロートプロパティは、ディスプレイのインライン/インラインブロック性で動作しません。インラインブロックを使用している場合は、同じ行にブロック要素を作成するので、floatは必要ありません。 – ali

@ali Floatはインライン/インラインブロックでうまく動作します。 – Rob

'clear：both'はすべての浮動小数点の後の要素に適用する必要があります。 'overflow：auto'をコンテナ（.statusInfo）に適用することで同じ効果を得ることもできます。 –