Block Versus Inline Content
Most html content renders in a browser as block content.
The most common inline elements are span, a (hyperlink), and img (image).
Images are the trickiest inline elements because they are often followed by block content making them "appear" to be blocks. But consider the following examples.
Example 1: several images positioned together prove that the img is an inline element -- images stay on the same line (inline).



Example 2: one image followed by block content makes the image "appear" that it is also a block element.

Paragraph content is block content which starts on its own line, its own block.
Example 3: one image - float left.

Block content that follows a left float.
Example 4: one image - float right.

Block content that follows a right float.
float: left; and clear: both;
The float property allows content that follows the floated content to occupy the available horizontal space not used by the floated content. Float is commonly applied to images given they have a distinct width which leaves extra horizontal white space beside the image when the next block of content is rendered on the page. Float can also be applied to sections of content to create multiple columns on a page. Content is floated left or right with the float: left; or float: right; declarations.
To "clear" the float use the clear: both; declaration on the content that you want to start on its own line. You may also clear only the left or right float by using clear: left; or clear: right; declarations.
Float tips...
- The content that is floated - whether left or right -- is positioned before other content in the html file.
- Because we read from left to right in the English language, content that is floated right may appear out of order in the html file. Content that is floated right must appear before other content in the html file.
- The "box" (margins, border, and padding) of content that follows a floated element behaves as if the floated element is not there.
- To clear a float which allows a block element to start on its own line, use the clear property. clear: both; is the most common declaration, but you can clear only a left or only a right float using clear: left; or clear: right;
- Textual content that is styled with a float should be given a width value. (Images have an inherent width.)
- It is not possible to float content in the center, only left or right.
- Floating content left or right shifts it to the left or right edge of the containing block.