html - Gravatar会干扰CSS样式

我正在关注迈克尔·哈特尔（Michael Hartl）的Rails教程，并且已经达到了设计用户的微型帖子供稿样式的地步。这些微型帖子来自部分内容，Hartl的网站显示这些内容应该看起来像this，而我的看起来像是this。玩了一段时间后，我注意到帖子在列中的渲染效果很好，直到载入了Gravatars为止。则微帖缩进不正确。

这是我的部分微博：

<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>

如果我注释掉指向Gravatar的链接，则微博栏会很好。这不是在本教程中遇到过Gravatar的first time问题，而且我真的不知道如何以允许该页面呈现所需方式的方式实现它。任何和所有帮助将不胜感激！

编辑：这是微博的相关样式：

.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;
  }
}

最佳答案

您需要在结束</li>之前添加一个clearfix，以便在下一行之前清除浮点数。否则它们会像您的图像一样堆叠，因为每个图像都向左浮动。

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

CSS：

.clearfix {
    clear: both;
}

关于html - Gravatar会干扰CSS样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34189093/