FLOAT, CLEAR & CSS

This tutorial is designed to eliminate some of the confusion associated with the float and clear properties in CSS.

The float and clear properties in CSS are synonymous with each other.
There is no other use for clear other than to clear a floated element.
Any element can be FLOATED, from images to paragraphs, to DIVS and tables.
If you use FLOAT on anything other than an image you have to put a width on it.

In this example, the RED, YELLOW and GREEN boxes are FLOATED to the left of the window. The Blue box is floated to the right of the window. This will stack Red Yellow Green beside each other.

-| Notice the behavior of the colored boxes when the window is resized smaller. This is determined by a second condition... below.

PLACEMENT:

The placement of elements is determined by the flow in the body of the document.

In the above example, the div (within HTML's body tags) that contains Red is above the div that contains Yellow and Green.

In the example below, Blue is higher placed within HTML than Green. Both blocks vie for the limited space. The behavior in the below case therefore is defined by the placement of elements within the body. This essentially allows Blue to force Green to wrap below Red because a sole element floated on either side of the screen (in this case Blue) cannot be forced onto a second line.

If you keep resizing the screen you will notice Blue returns third in the hierarchy of block-level elements (this is how it was written in HTML's body for this example).

Placement therefore is crucial.

FLOAT & CLEAR:

Like an old typewritter, CLEAR is only valid to clear (return to the next block-level line – not the same line) FLOATED elements. One common mistake new programmers commit with the clear property is to place it on the wrong element. You can float as many elements to the left or right of the screen. This will align them in a sequence until a browser resize forces them onto new lines, determined by their placement in the HTML's body.

The final element you wish to float left or float right should not have a clear:left; or clear:right; value respectively. This is a common mistake. Only the element you wish to clear onto another line should have this value. This ensures no other element wraps on the designated side of the instructing element.

A rule of thumb to remember is this:

FLOAT is relative to the element (it chooses on what side of the screen you place that specified element )
CLEAR is relative to other elements (it determines whether to keep the specified element on a shared line or its own line relative to the values of other unspecified elements)

In layman's terms:

FLOAT - place whatever stuff I ask wherever I asked the stuff to be placed on the screen.
CLEAR - if there is stuff on the right or left of the screen, place this stuff on another line, otherwise if there isn't stuff on the right or left of the screen, ignore what I asked and put it there.

Another question you should ask, is:

Where do you want it floated?
What do you want it to clear?

FLOAT & CLEAR EXAMPLES:

In our first example, the aim is to have Red and Yellow floated on the one line, and Blue cleared onto another line. The elements that Blue wishes to clear are Yellow and Red. Placing CLEAR:RIGHT; on the rightmost element Yellow for example will not CLEAR Blue. In this case, CLEAR affects the element Yellow. This common mistake can cause elements to stack in a jagged pattern.

In our second example, the Blue element correctly uses CLEAR:LEFT; to return to a new line.

-| NOTE : Internet Explorer and Firefox treat both properties' behavior relative to elements differently. Both browsers recognize the 50% divide between elements floated on each side of the screen.
Explorer renders the divide like frames, so the behavior from a screen resize would see the elements on one side stop the elements on the other side from crossing the divide. Explorer only clears what elements are on the left of the elements floated on the right of the divide, and vice versa.
Firefox on the other hand renders the block-level elements access to cross the divide, and change the behaviors of those elements respectively, according to their place within HTML's body tags. Other browsers have other quirks too.

FLOATED NONE:

Elements that are FLOATED left and FLOATED right are vulnerable to elements falling between the middle empty space between the floated elements. The result is like Tetris.

The answer to this is to CLEAR: both;

In a final word, floated elements float above normal elements, as this example will demonstrate.

So keep the z-index of all elements in mind in the context of all elements' properties and values.