Floats are very strange because they don't behave predictably with respect to the box model. You might expect floats to stay inside their parents, but they don't. Frankly, float behavior is very unintuitive. In the examples below, the parent is teal and the float is purple.
Example Code
<!DOCTYPE HTML>
<html><head><title>Float Tests</title></head>
<style>
.parent { border: 1px solid #00ddaa; margin-bottom: 5em; }
.float { border: 1px solid #dd00bb; float: right; }
.clear { clear: both; }
p { margin: 0; }
</style>
<body>
<div class="parent">
<p class="float">Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div></div>
</div>
<div class="parent">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p class="float">Paragraph 3</p>
<div></div>
</div>
<div class="parent">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p class="float">Paragraph 3</p>
<div class="clear"></div> <!-- We're clearing this time -->
</div>
</body></html>
Render
Analysis
In the first example, the p1 is floating. p1 moves to the right but the p1's lower edge does not block against the p2, so p2 slides upward to fill in the empty space.
In the second example, the p3 is floating. p3 moves to the right but the paragraph's lower edge does not block against the parent div's lower edge, so the border slides upward to fill the empty space. This results in the paragraph appearing outside of the div.
In the third example, the p3 is floating again. It moves to the right as it did previously, but when we add clear to the div between the p3 and the parent's closing div, the cleared div blocks against the parent div's lower edge.
So what's happening here?
What float actually does is allow elements below it to flow around its content. Quirkily, it also allows containing blocks to collapse around it.
If p1 in our first example had enough content to fill the full width of the parent container, we would not see any floating taking place. In order for floating to happen, the width of the floating block has to be limited to allow for other elements to spill into the space it would otherwise occupy.
So why doesn't paragraph 3 float to the top of the parent container? Because paragraphs 1 and 2 are filling the full width of the parent container. If you want to have both the second and third paragraphs on the same line, you will have to float the second paragraph to the left, like so:
<div class="parent">
<p>Paragraph 1</p>
<p class="float" style="float: left;">Paragraph 2</p> <!-- Float left -->
<p class="float">Paragraph 3</p>
<div class="clear"></div>
</div>
Which renders as:
Summary
The rule of thumb is that floating only allows blocks below the floated element(s) to flow. For two items to share the same line, you'll have to float twice (once left, once right), or place your float first. Also, if you want the parent to contain the floats, you'll have to add a clear before the parent's closing tag.