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

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.