Floated items inside containers
Date: 6 January 2004
Author: Russ Weakley
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.
Example 2
If the content inside the container is long enough, the floated item may appear to sit correctly inside the container.
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”. This is not an ideal solution as it involves adding additional elements.
Example 5
A simpler solution is to float the parent container as well. The container below has short content, but as the container is also floated, it wrappes around the red box.
Further reading
- Matt Brubeck: How to completely enclose a floated element in CSS2
- Tony Aslett: How To Clear Floats Without Structural Markup