parentNode.org

The CSS properties float and clear empower you to create lightweight and flexible layouts while keeping your markup sleak and logic. But floats easily may end up in unexpected behaviours if you do not know what you are doing. In this post I will summarize many of the findings I have read all over the web.

Float in theory

Hey, don’t stop reading! This is not the usual blabla. It won’t take long and it won’t hurt—promised!

W3C says:

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property).

And this is simply it. So assigning the float property to an element tells the browser: “Take this element, move it to the side, let all following content flow along it’s side!” That was easy, huh?

But wait, what do they mean with “content”?

Well, they are talking about line boxes (lines of text or images) and not block boxes (paragraphs, headings etc.). This means only the lines of text and the images inside of block boxes following a floating element get moved aside. Block-boxes like divisions (div) or paragraphs (p) will not be influenced by a floating element—unless they themselves are floating …

99 little floats on the wall …

What happens if there are more than one floating element? Well the guys over at W3C provide a pretty neat explanation:

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.

and:

If there isn’t enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

Got it? Let’s say you want two images before some paragraphs to be floated to the left.

<img src="foo.gif" class="iamleft" />
<img src="bar.gif" class="iamleft" />
<p>Some long text explaining some details.</p>
<p>Even more text explaining some more details.</p>

The CSS for the images would look like this:

img.iamleft {float:left;}

So our example would look like this if there is enough horizontal space:

and like this if there is not:

¿Comprende? The floating boxes just move themselves around to fit the available horizontal space. The floating elements first will try to align horizontally. And so will the other content following any floated element. If there is not enough space the floating boxes will “magically” move down to fit the space.

Please read the floating rules W3C provided in the CSS spec. They contain useful information on how float is meant to work.

Live and let float

There is one more thing special about float—floating elements are “not in the flow” as the W3C calls it. That means these elements don’t have any impact on the height of block boxes. Or to make it more clear: floating elements inside a container will not make this container expand its height to enclose the contained floating elements. For more details and possible values, please, have a look a the W3C CSS spec.

Clear in theory

To prevent content next to floating elements from flowing down their sides the property clear has been invented. It applies to block level content like paragraphs, headings or divisions only. The cleared content will then start beneath the floating element instead of aside. Clear simply tells the browser: “There is no floating allowed besides this element on that side.”

Assume you have something like this:

<div class="iamleft"><img src="foo.gif" alt="i am left" /></div>
<div class="iamlefttoo"><img src="bar.gif" alt="i am left too" /></div>
<p>Some long text explaining some details.</p>
<p>Even more text explaining some more details.</p>

and your CSS looks like this:

div.iamleft {float:left;}
div.iamlefttoo {float:left;clear:left;}

then your browser should render something like this:

You are free to choose if an element should clear only elements floating to the left, to the right or both. If you place several floating elements in one page to the left and to the right you can decide if an element clears preceding floating elements that float to the left or to the right or both.

Please have a look at the W3C CSS spec on clear for a full list of possible values and further details.

“Ah I see …”

No, wait! One more interesting fact about clear is, that it works globally. Let’s say you have this:

<div id="farfarleft"><img src="foo.gif" alt="some very high picture" /></div>
<div id="notsofarleft">
    <img src="bar.gif" width="100" height="100" class="totheleft" alt="not so far left picture" />
    <p>Some other text.</p>
    <p class="clearvision">This is cleared.</p>
</div>

With this CSS assigned:

div#farfarleft { float:left; }
div#notsofarleft { margin-left: 300px; }
img.totheleft { float: left; }
p.clearvision { clear: left; }

it should result in something like this:

Surprised? What happened? As I said clear is working globally. Therefor it clears any preceding float in the same containing block. And this will cause p.clearvision to be “pushed down” below the bottom edge of img#farfarleft. Keep this in mind, we will need it later.

In later posts I will show clear and float in real life and how to enclose floats.