A mini-tutorial on how the CSS float and clear properties work, and how to use them in your page.
Note: all examples in this tutorial use inline-CSS to illustrate what is going on. You should not do this in your pages, but should instead abstract the styles out into a separate style sheet. For more information, see the "Separate Style from Content" tip in another tutorial of mine, "How to Develop with CSS".
float doesThe float property causes the item to which it is applied to 'float' to the side of the content which comes after it, with this content wrapping around it.
<p>
<span style="float:right; background:#ccf">I'm a little floater</span>
I'm 'normal' content, and I wrap around any floats which appear before
me in source code. Here's a bunch of text just to ensure that you can
see my wrapping around the float.
</p>I'm a little floater I'm 'normal' content, and I wrap around any floats which appear before me in source code. Here's a bunch of text just to ensure that you can see my wrapping around the float.
Note that block-level elements will still wrap around the float:
<p style="float:right; background:#ccf; width:10em">I float!</p>
<p>I'm 'normal' content, and I wrap around any floats which appear
before me in source code. Here's a bunch of text just to ensure
that you can see my wrapping around the float.</p>I float
I'm 'normal' content, and I wrap around any floats which appear before me in source code. Here's a bunch of text just to ensure that you can see my wrapping around the float.
At this point I'm going to stop showing the full source code for each example; view the source of this page if you need to see it.
Without a specific width applied to a float, it will shrink/expand to accommodate its content:
I'm a long floater with a large amount of content and no width.
I'm 'normal' content, and I wrap around any floats which appear before me in source code. Here's a bunch of text just to ensure that you can see my wrapping around the float.
I'm a long floater with width:7em specified, keeping me in check.
I'm 'normal' content, and I wrap around any floats which appear before me in source code. Here's a bunch of text just to ensure that you can see my wrapping around the float. Here's a bunch of text just to ensure that you can see my wrapping around the float. Here's a bunch of text just to ensure that you can see my wrapping around the float. Here's a bunch of text just to ensure that you can see my wrapping around the float. Here's a bunch of text just to ensure that you can see my wrapping around the float.
You can apply margins to floats to hold the surrounding text off:
float:left;
width:7em;
margin-right:1em;
margin-bottom:1em;
I'm 'normal' content, and I wrap around any floats which appear before me in source code. Here's a bunch of text just to ensure that you can see my wrapping around the float. Here's a bunch of text just to ensure that you can see my wrapping around the float. Here's a bunch of text just to ensure that you can see my wrapping around the float. Here's a bunch of text just to ensure that you can see my wrapping around the float. Here's a bunch of text just to ensure that you can see my wrapping around the float.
It's important to note that floats only push the content to wrap around it...the background/borders of items still go behind the float:
margin:0 2em
This float is tall to show that borders and backgrounds go under floats.
Notice how the background color of this paragraph continues as if the float weren't there, despite the fact that the content of this paragraph wraps around the float and its margins. See also how the and the bottom border of the header above also behaves similarly. Whether you think this is Good or Bad, it's the way the specifications say it's supposed to behave.
Although there are many techniques for creating a multi-column layout in CSS, the most popular is to use a floated block for one column. To do this, simply apply a margin on main content, to keep it from wrapping under the float once it has clear past.
width:8em
This float is being used as a column.
This paragraph has margin-left:9em to ensure it stays to the right of the floated 'column'. (I'm using 9em and not 8em to provide some whitespace between the two columns.) Note also how the background of this paragraph doesn't go under the column, because of the margin. And finally, note that this paragraph has gotten past the end of the float, but isn't wrapping underneath it.
See For More Information at the the bottom of this tutorial for a link to a full-featured example showing a two-column layout.)
The CSS clear property works with floats. The code clear:left means "move down vertically until no content is floated to the left of me, and then start with the next content". Illustrated:
margin-right:1em; margin-bottom:1em;
This float is tall to show what happens when you have two paragraphs next to it.
This is paragraph number 1.
This is (unstyled) paragraph number 2.
margin-right:1em; margin-bottom:1em;
This float is tall to show what happens when you have two paragraphs next to it.
This is paragraph number 1.
This paragraph has clear:left applied to it, and starts after the float is done.
Floating content is taken out of the normal flow calculations. Therefore, it is 100% correct that a float may continue on past the end of a container that it is inside of. (Or more accurately, it is correct for a container to end as soon as its non-floated content is finished.)
margin-right:1em;
Here's a bunch more content to make this float extra tall, flowing outside the box that holds this example.
This is all the content that will be held by this container.
People often find that the container-overflow behavior is a problem with their layout. There are a couple ways to fix it. One is to use a clear at the end of the content to make sure that you get past the float before the content (and thus, container) is 'done':
<p style="float:left; ..."> ... </p>
<p style="margin-bottom:1em">This is paragraph number 1.</p>
<p>This is (unstyled) paragraph number 2.</p>
<div style="clear:left"> </div>margin-right:1em
This float is extra tall with extra content to show what happens when you have two paragraphs next to it.
This is paragraph number 1.
Look! The float is held within the container by the empty <div> placed after this paragraph!
Another (cleaner) way to fix it is to use overflow:auto on the owning container. Thanks to swim84 on #css on Freenode for pointing out this technique.
<div style="overflow:auto; ...">
<p style="float:left; ..."> ... </p>
<p style="margin-bottom:1em">This is paragraph number 1.</p>
<p>This is (unstyled) paragraph number 2.</p>
</div>margin-right:1em
This float is extra tall with extra content to show what happens when you have two paragraphs next to it.
This is paragraph number 1.
The owning div has overflow:auto which automatically extends it as needed.
Regarding clearing past items (and how to control which items you clear past) see: Float Clear Test.
An example of a two-column layout using the container clearing: 'Full-Height' Columns Using Borders.
An example showing how to pull floats outside of the container: Column Overlap.
An example showing how to start a float in the middle of a paragraph: Quote Float 2.
A note on a bug IEWin has with the way it handles clearing floated content: Clearing Floated Content.