INLINE Elements and FLOATS


Elements may be added to the page with INLINE structure or with FLOATS.

 

INLINE Elements are placed within “normal” document flow.
This page structure maintains the vertical organization of elements as they are added to the page one after the other.

 

FLOATED Elements are removed from “normal” document flow.
This page structure allows elements to “float” above the page and, as a result, other elements move up to take the place of where they used to be.

Floated elements allow them to be placed next to one another horizontally.

 

Elements may be “floated” left or right.
Elements Floated “left” align to the furthest left position possible.
Elements Floated “right” align to the furthest right position possible.

 

Clearing Floats:
A CSS Rule of clear: left; or clear: right; keeps the next element from floating on that side of a
previously floated element.

 

A CSS Rule of clear: both; returns the element back to “normal” document flow and pushes the next Element below the previously “floated” Elements.

 

A Class of .clear with a CSS Rule of clear: both; may be added to an element to force no other elements to float next to it or below it.