How to float a span in a div?

Question

I'm trying to learn how to actually use CSS without the help of Bootstrap.

I have the following: (can be viewed here: http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview)

<div class="block">
  <span class="pull-left">George</span>
  <span class="pull-right">$23.20</span>
</div>

<div class="block">
  <span class="pull-left">Carl</span>
  <span class="pull-right">$4.81</span>
</div>

<div class="block">
  <span class="pull-left">Steve</span>
  <span class="pull-right">$0.34</span>
</div>

and the CSS...

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.block {
    display: block; /* since, div, I don't need this right ?*/
    background-color: #87CEEB;
    width: 100%;
}

If I was using Bootstrap, I could achieve the desired effect, by putting my html in a container div and instead of using my custom class of block, add the class btn and btn-block.

I want to have the names align vertically on the left and the prices align vertically on the right. What am I missing?

Sort of like:

George                                     $23.20
Carl                                        $4.81
Steve                                       $0.34

Please don't mention tables, like I said, I could use bootstrap and wrap the above html in div.container, and then use button.btn.btn-block instead of my div.block to achieve the exact same effect. Thanks.

Update 1:

OK, I didn't expect there to be more than maybe one or two solutions, but there's quite a bit. Can someone explain the pros/cons of each solution? I'm really at a loss here.

Solution #1:

Add a new div element:

<div class="block">
  <span class="pull-left">George</span>
  <span class="pull-right">$23.20</span>
  <div style='clear:both'></div>
</div>

Solution #2:

Add clear:both; overflow:auto; to the block class by thgaskel

Solution #3:

This one seems to create margins between the blocks.

Change display:block to display:inline-block for the block class.

Solution #4:

Add float:left to the block class.

Solution #5:

Discovered this one while messing around. Create a new selector:

.block:after {
  content: ":" /* <--- at a complete loss why this works */ 
}

Solution #6:

Discovered this one from reading this page.

.block:after {
  content:"";
  display: table;
  clear: both;
}

I'm feeling pretty overwhelmed and am not sure which to pick. Thanks.

Answer 1

Add float:left; to .block class since its child are floating that why you need to float its parent div to get the full width

.block {
    display: block; /* since, div, I don't need this right ?*/
    background-color: #87CEEB;
    width: 100%;
    float:left;
}