.icon .pull-left表达奇怪的行为

Question

我正在使用Bootstrap开发一个应用程序（使用Dark Admin theme），我为管理员添加了一个小用户Feed，类似于this demo上的Feed面板。我的HTML是这样的，我将CSS与演示中的CSS进行了比较（因此您可以假设样式字面上相同）：

<div id="feed_box">
      <section class="feed-item">
            <div class="icon pull-left"><i class="fa fa-info"></i></div>
            <div class="feed-item-body">
                    <div class="text">Some text goes here</div>
                    <div class="time pull-left">44 minutes ago.</div>
            </div>
      </section>
      <section class="feed-item">
            <div class="icon pull-left"><i class="fa fa-info"></i></div>
            <div class="feed-item-body">
                    <div class="text">Some text goes here</div>
                    <div class="time pull-left">44 minutes ago.</div>
            </div>
      </section>
</div>

HTML的结构也与演示中的示例类似。但是，当我在自己的项目中打开页面时，icon pull-left项目到处都是：

我想创建一个jsFiddle，但是当我导出渲染的HTML页面并查看该页面时，它运行正常。

为什么这些图标的缩进如此混乱？我该如何解决这个问题？

我不确定哪些信息在这里很重要，所以如果不够清楚，请告诉我。

Answer 1

添加clearfix类将解决此问题：

<section class="feed-item clearfix">
    <div class="icon pull-left"><i class="fa fa-info"></i></div>
    <div class="feed-item-body">
        <div class="text">Some text goes here</div>
        <div class="time pull-left">44 minutes ago.</div>
    </div>
</section>

pull-left正在影响以下项目。

如果您有兴趣了解pull-left如何更改元素流，请在CSS中为border: 1px solid red;类添加pull-left。