Russ Weakley
6-Jan-04
A definition of Normal flow
Normal flow is the way a document will display if
you had no positioning or floating applied to elements.
The content will flow down the page, starting with
the first element in your document and finishing with
the last element in your document.
A definition of Float positioning
A floated element is positioned within the normal
flow, then taken out of the flow and shifted to the
left or right as far as possible. More detailed information
on floats can be found at Floatutorial
Examples of floated element inside containers
Below are four examples of floated items inside a
container. The floated items are small red boxes.
The containers are yellow boxes with dashed black
borders.
As mentioned above, floated elements (like the red
box in the examples below) are taken out of normal
flow, so their containers (the yellow containers)
cannot determine their height. The yellow containers
will stretch to fit content inside them - but only
content that is in normal flow. The containers will
ignore the height of the floated items.
Example 1
If the content inside the container is very short,
the floated item may poke out the bottom of the container.
Text here
Example 2
If the content inside the container is long enough,
the floated item may appear to sit correctly inside
the container.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
Example 3
If a container has no content inside, it has no height
so it should not render the yellow background color
at all. If there is only a floated item inside, then
only this item will render. As you can see, the container
will not render around the floated item.
Example 4
You can force the container to clear floated items
inside. The container below has short content, but
there is also a clearing element inside to push the
container below the floated item. In this case, a
<div> element is used, styled with "clear:
both".
Text here
Further reading
Matt Brubeck:
How to completely enclose a floated element in CSS2
Tony Aslett: How To Clear Floats Without Structural
Markup
