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).

professional man professional man professional man

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

professional man

Paragraph content is block content which starts on its own line, its own block.

Example 3: one image - float left.

professional man

Block content that follows a left float.

Example 4: one image - float right.

professional man

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...