CSS поплавок проблема с начальной загрузкой

Question

Моей проблемы демонстрируется в этом 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> 

Я не понимаю, почему красный круг # 2 поплавков рядом круг # 1. Они оба находятся в разных контейнерах, моя цель - плавать красные круги влево в контейнере.

Может кто-то пожалуйста, дайте explanation..Thanks заранее

Answer 1

Плавающий элемент принимает его из нормального потока документа. Из-за этого ваш div + svg на самом деле выше, чем элемент list-group, который находится внутри. Поскольку он слишком высок, он отталкивает другой контент. Попробуйте посмотреть на bootstrap's media object или добавьте clearfix class в ваш список-group-item.

Answer 2

Это из-за float:left, указанного вами для якоря .list-group-item.

Когда элемент плавает, его высота не будет рассчитываться как высота вмещающего родителя. Поэтому, основываясь на ошибочной высоте, вы перемещаете второй элемент, и он сам пытается разместить доступное пространство, то есть почти рядом с svg-изображением 1.

SO Когда бы ни был плавающий элемент, вы должны его очистить в следующий элемент, иначе вы столкнетесь с проблемами, связанными с расчетной высотой.

Добавить clear:both для .list-group-item class.

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