img.right { float: right; } class="right" is placed at the end of the image
tag in the code. Using the 'float' property, an element can be declared to be
outside the normal flow of elements and is then formatted as a block-level element.
For example, by setting the 'float' property of an image to 'left', the image
is moved to the left until the margin, padding or border of another block-level
element is reached. The normal flow will wrap around on the right side. The
margins, borders and padding of the element itself will be honored, and the
margins never collapse with the margins of adjacent elements.
This is an example of 'float' and 'border':
<STYLE>
p
{ border: red double 0.5em; }
img
{ position: relative; top: 0; left: 0; border: thick double green; }
img.right
{ float: right; }
img.left
{ float: left; }
<STYLE>
img.left
{ float: left; } class="left" is placed at the end of the image tag in the
code. Using the 'float' property, an element can be declared to be outside the
normal flow of elements and is then formatted as a block-level element. For
example, by setting the 'float' property of an image to 'left', the image is
moved to the left until the margin padding or border of another block-level
element is reached. The normal flow will wrap around on the right side. The
margins, borders and padding of the element itself will be honored, and the
margins never collapse with the margins of adjacent elements.