如何在图像下放置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>

由于某些原因，它在chrome中看起来也不错，而在FF中也不行。

Answer 1

为.postfooter

添加css

.postfooter {
    clear: both;
}

这将确保它在自己的路线上。