CSS float issue with bootstrap

Question

My problem is demonstrated in this 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>

I don't understand why red circle #2 floats next to circle #1. They both are in different containers, my goal is to float red circles to the left with in it's container.

Can someone please give an explanation..Thanks in advance

Answer 1

Floating an element takes it out of the normal flow of the document. Because of this your div+svg is actually taller than the list-group-item that it's inside of. Since it's too tall, it's pushing other content out of the way. Try looking at bootstrap's media object or add the clearfix class to your list-group-item.

Answer 2

This is because of float:left that you've specified for anchor .list-group-item .

When an element floats, its height will not be calculated as the enclosing parent's height. So based on the miscalculated height, you second element has moved up and it tries it self to accommodate the available space ie, just near to svg image 1.

SO Whenever there is a floating element you have to clear it in the following element, otherwise you would face issues related to the calculated height.

Add clear:both for .list-group-item class.

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