イメージの下にpタグを配置する方法は？

Question

イメージの下にテキストを配置しようとしていますが、何らかの理由でコンテナが終了してイメージの下に来るまで右にとどまります。 私はそれが完全にイメージの下にあることを望みます。

そして、ここのコードです：

.post { 
 
    margin-top: 3px; 
 
    width: 80%; 
 
    font-size: 20px; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.post h2 { 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
} 
 
.post h2:hover { 
 
    color: #0099FF; 
 
} 
 
.post img { 
 
    display: block; 
 
    width: 95%; 
 
    height: auto; 
 
    float: left; 
 
    position: relative; 
 
} 
 
.post p { 
 
    display: block; 
 
    top: 7px; 
 
    font-size: 13px; 
 
    color: #999; 
 
} 
 
.rating { 
 
    display: inline-block; 
 
} 
 
.rate { 
 
    display: inline-block; 
 
    height: 34px; 
 
    width: 44px; 
 
    border: 1px solid #ddd; 
 
    border-radius: 3px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    line-height: 30px; 
 
    margin-bottom: 25px; 
 
    margin-left: 5px; 
 
} 
 
.rate:first-child { 
 
    margin-left: 0; 
 
} 
 
.rate:hover { 
 
    border: 1px solid #999; 
 
} 
 
.rate img { 
 
    position: relative; 
 
    top: 7px; 
 
    left: 12px; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
.social { 
 
    display: inline-block; 
 
    height: 34px; 
 
    float: right; 
 
} 
 
.social a img { 
 
    display: inline-block; 
 
    height: 34px; 
 
    width: auto; 
 
    margin-right: 10px; 
 
}

<div class="post"> 
 
    <h2>I know I'm a douche for wearing sunglasses at night but...</h2> 
 
    <img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg" /> 
 
    <div class="postfooter"> 
 
    <p>Over 9000 points · 56 comments</p> 
 
    <div class="rating"> 
 
     <div class="rate"> 
 
     <img src="up.png"> 
 
     </div> 
 
     <div class="rate"> 
 
     <img src="down.png"> 
 
     </div> 
 
     <div class="rate"> 
 
     <img src="comment.png"> 
 
     </div> 
 
    </div> 
 
    <div class="social"> 
 
     <a href="#"> 
 
     <img src="facebook.png"> 
 
     </a> 
 
     <a href="#"> 
 
     <img src="twitter.png"> 
 
     </a> 
 
     <a href="#"> 
 
     <img src="googleplus.png"> 
 
     </a> 
 
    </div> 
 
    </div>

また、それはFFで、いくつかの理由と大丈夫ではないため、クロムで大丈夫に見えます。

Answer 1

これは、それが自身のライン上にあることを確認します.postfooter

.postfooter { 
    clear: both; 
} 

のCSSを追加します。