How does the CSS clear property work?

Hello, me again :) I’ve been struggling to no end to make sense of the “clear” property and I really don’t understand a) its purpose and b) how to implement it properly.

Answer:

The clear property specifies which sides of an element where other floating elements are not allowed. Basically it tells the browser – we don’t allow floats next to this property. So lets say for instance: you’re floating two columns left and then you have a box below them that you want to break the float (in other words not sit next to the floated items above), you’ll want to clear the float so that the bottom element inserts itself after the other two columns instead of showing up on the right hand side of the floated columns (as it would normally since the other two elements are floated).

The CSS would look like this:

<style type="text/css">

#sidebar {float: left; width: 100px;}
#main-content {float: left; width: 300px;}
#footer {clear: left;}

</style>

And the code in the body would look like:

<div id="sidebar">

<p>This column is the sidebar - it's floated left</p>

</div>

<div id="main-content">

<p>This column is the main content - it's floated left</p>

</div>

<div id="footer">

<p>This is the footer, it's clear:left so it displays below the floated elements and does not allow the standard "wrap" where it would display to the right of the left floated elements above.</p>

</div>

Take this bit of code and toss it into an HTML editor, play around with it by removing the clear property and adding it again. Or, if you want to play with an in page editor check out this quick clear tutorial by QuackIt.

0 responses so far

  • There are no comments yet...Kick things off by filling out the form below.

Leave a Comment