The float property is used extensively with CSS styles. An element can be set to float: left or float: right. If a specific element has a float property applied to it from an earlier source, you can negate that with float: none.

Several problems can arrise with setting elements to float.

The content below rises upward to take up the remaining space left by the floating element

Here is an example of this issue:

This is a box that
is set to float: left;

This is a box that
is set to float: right;

This is the content that is floating upward to fill the space between the two floating elements. This is the content that is floating upward to fill the space between the two floating elements. This is the content that is floating upward to fill the space between the two floating elements. This is the content that is floating upward to fill the space between the two floating elements. This is the content that is floating upward to fill the space between the two floating elements.

If you want the lower element, in this case the <p> tag, to sit nicely below the floating elements, you must apply a clear property to that lower element.

Example:

<p style="clear: both">

Or you can assign a class in your stylesheet for all elements that need to clear both floats, say a class of "clearall".

Example:

.clearall {clear: both;}

Then in your HTML document you assign that class to the element.

Example:

<p class="clearall">This element will clear left and right floats.</p>

If for some reason you only need to have the next element clear a left float or a right float, you can do that as well.

Example:

<p style="clear: left"> OR <p style="clear: right">