CSS Float Problem mit Bootstrap

Question

Mein Problem ist in diesem demonstriert Plnkr. http://plnkr.co/edit/Zb83SS26t15bR2AaJJzf?p=preview

<a class="list-group-item " > 
      <div style="float:left"> 
      <svg width="50" height="50"> 
       <circle cx="15" cy="15" r="15" fill="red"></circle> 
       <text x="10" y="20" font-family="sans-serif" font-size="14px" font-weight="bold" fill="white">1</text> 
      </svg> 
      </div> 
      <div> 
      <h4 class="list-group-item-heading "><span>one</span> 
              <small class="pull-right ">10:21 </small> 
      </h4> 
      <span class="list-group-item-text text-left "></span> 
      <span class="list-group-item-text pull-right">#XYZ</span> 
      </div> 
</a> 

Ich verstehe nicht, warum roten Kreis # 2 schwimmt neben Kreis # 1. Sie sind beide in verschiedenen Containern, mein Ziel ist es, rote Kreise nach links in den Container zu schweben.

Kann jemand bitte eine explanation..Thanks im Voraus

Answer 1

Schwimmdock ein Element nimmt es aus dem normalen Fluss des Dokuments geben. Aus diesem Grund ist dein div + svg tatsächlich größer als das Listengruppenelement, in dem es sich befindet. Da es zu groß ist, werden andere Inhalte aus dem Weg geräumt. Versuchen Sie, Bootstrap media object zu betrachten oder fügen Sie die clearfix class zu Ihrer Liste-Gruppe-Element.

Answer 2

Dies ist wegen float:left, die Sie für Anker .list-group-item angegeben haben.

Wenn ein Element schwebt, wird seine Höhe nicht als die Höhe des umschließenden Elternteils berechnet. Also basierend auf der falsch berechneten Höhe, ist das zweite Element nach oben gerückt und es versucht sich selbst den verfügbaren Platz anzupassen, dh, gerade in der Nähe von Svg Bild 1.

SO Immer wenn es ein schwebendes Element gibt, müssen Sie es in der löschen Folgeelement, sonst würden Sie Probleme in Bezug auf die berechnete Höhe haben.

Fügen Sie clear:both für .list-group-item-Klasse hinzu.

http://plnkr.co/edit/ygBlR6SyN9zI9WAao9mi?p=preview