The float attribute isn't only for images. You can also use it with any element (typically p or div) to create new layouts.
When you apply the float element to a paragraph, the behavior of that paragraph doesn't change much, but the behavior of succeeding paragraphs is altered.
To illustrate, I take you all the way through the process of building two side-by-side paragraphs.
When you float an element, the behavior of succeeding elements is highly dependent on the width of the first element. This leads to a primary principle of float-based layout:
If you float an element, you must also define its width.
Temporary borders on key elements were added to facilitate viewing. They could be removed.
First set of 3 paragraphs with only float: left; defined for Paragraph 2.
Paragraph 1. - This paragraph has the normal behavior of a block-level element. It takes up the entire width of the page, and the next element is placed underneath.
Paragraph 2. - This paragraph is floated left. It is placed to the left, and the next element will be placed to the right of it.
Paragraph 3. - This paragraph has no floating, width or margin. It takes whatever space it can to the right of the floated element, and then flows to the next line.
Second set of 3 paragraphs with float: left; and added 50% width defined for Paragraph 2.
Paragraph 1. - This paragraph has the normal behavior of a block-level element. It takes up the entire width of the page, and the next element is placed underneath.
Paragraph 2. - This paragraph is floated left. It is placed to the left, and the next element will be placed to the right of it.
Paragraph 3. - This paragraph has no floating, width or margin. It takes whatever space it can to the right of the floated element, and then flows to the next line.
Second set of 3 paragraphs with float: left; and added 50% width defined for Paragraph 2, and in addition, the third paragraph has margin-left: 52% defined./p>
Paragraph 1. - This paragraph has the normal behavior of a block-level element. It takes up the entire width of the page, and the next element is placed underneath.
Paragraph 2. - This paragraph is floated left. It is placed to the left, and the next element will be placed to the right of it.
Paragraph 3. - This paragraph has no floating, width or margin. It takes whatever space it can to the right of the floated element, and then flows to the next line.