Gravatar会干扰CSS样式

Question

I'm following Michael Hartl's Rails Tutorial, and I've reached the point where I'm styling a user's micropost feed. The microposts render out of a partial, which Hartl's website shows should look like this but mine looks like this . After playing around a bit, I noticed that the posts render in a column just fine until the Gravatars are loaded; then the microposts indent improperly.

Here's my micropost partial:

<li id="micropost-<%= micropost.id %>">
  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>
  <span class="content">
    <%= micropost.content %>
    </span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
  </span>
</li>

If I comment out the link to the Gravatar, the column of microposts renders fine. This isn't the first time I've had trouble with Gravatar in this tutorial and I really have no idea how to implement it in a way that will allow this page to render the way I want. Any and all help would be appreciated!

Edit: Here's the relevant styling for microposts:

.microposts {
  list-style: none;
  padding: 0;
  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }
  .user {
    margin-top: 5em;
    padding-top: 0;
  }
  .content {
    display: block;
    margin-left: 60px;
    img {
      display: block;
      padding: 5px 0;
    }
  }
  .timestamp {
    color: $gray-light;
    display: block;
    margin-left: 60px;
  }
  .gravatar {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
  }
}

aside {
  textarea {
    height: 100px;
    margin-bottom: 5px;
  }
}

span.picture {
  margin-top: 10px;
  input {
    border: 0;
  }
}

Answer 1

You need to add a clearfix before the closing </li> so the floats are cleared before the next row. Otherwise they will stack like in your image because every gravatar is floating left.

...
<span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
</span>
<span class="clearfix"></span>
...

CSS:

.clearfix {
    clear: both;
}