Floating

Floating is used when there is a need for wrapping one element around another. It is often used for website layouts and is often applied to images as well.

When an image is floated to the left, any text that appears after the floated image will appear to the right of that image.

Similarly, an image floated to the right, will have any text that follows appear to the left of that image.

In the examples below, the image is first presented without the float property and then with it applied.

An Image Without Floating

<img src="images/flower.jpg" title="Flowers" alt="Flowers" />
<p> This is an image of a rose. </p>

Output:
Flowers

This is an image of a rose.

Notice how the paragraph of text, “This is an image of a rose.” appears beneath the image?

Applying the Float Property

When the float property is applied to the same image above the effect is different. The image remains to the left but instead of the text falling below, it is instead displayed to the right of the image.

<img src="images/flower.jpg" title="Flowers" alt="Flowers" style="float: left;" />
<p> This is an image of a rose. </p>

Output:

Flowers

This is an image of a rose.

Note how the text now appears to the right of the rose which was floated left.

The Clear Property

The clear property is used closely with the float property to break out of a float.

For text displayed next to a floated image for example, applying the clear property enables the text to move from the right of the image to the bottom.

It reverses the effect of the float property. The values are both, left and right.

<img src="images/rose.jpg" title="Flowers" alt="Flowers" style="float: left;" />
<p> This is an image of a rose.</p>
<p style="clear: both;"> Isn't it pretty ?</p>

Output:

Flowers

This is an image of a rose.

Isn’t it pretty ?