.icon。左に奇妙な振る舞いを表現する

Question

私はブートストラップ（Dark Admin themeを使用）を使ってアプリケーションを開発していますが、フィードパネルのような小さなユーザーフィードをthis demoに含めました。私のHTMLは次のようである、と私は、デモ中に1とCSSを比較した（ので、あなたのスタイルは、文字通り同じであると仮定することができます）：HTMLはまた、デモでの例と同様に構成されている

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

。私は自分のプロジェクトでページを開いたときしかし、icon pull-left項目は、すべての場所にある：

私はjsFiddleを作りたかったが、私はレンダリングされたHTMLページをエクスポートし、1ことを見たときに、それがうまく働きました。

なぜこれらのアイコンのインデントがうまくいかないのですか？これをどうやって解決するのですか？

ここで重要な情報は何もわからないので、十分明確でない場合は教えてください。

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が要素のフローを変更しているのを見て興味深い場合は、border: 1px solid red;をCSSのpull-leftクラスに追加してください。