This is a bit old - you may or may not notice the date on this post but it's over a year old. That doesn't mean it's not useful but we all know how fast things chance on the web so there's a chance that techniques and technologies described here could be a little dated.

Quick Tips : Clearing Breaks

Posted on by

Yes they’re a dirty little web trick but clearing breaks can come in quite handy in these troublesome cross browser issue ridden days.

To learn more about floats and how they work have a read of this vanseodesign.com article.

So how to use them, well personally I declare 3 styles in my CSS
[sourcecode language=’css’]
/*clear breaks*/
br.clearright{ clear:right; line-height:0;}
br.clearleft{ clear:left; line-height:0;}
br.clearboth{ clear:both; line-height:0;}
[/sourcecode]

They obviously correspond to clearing left, right or both. Then when I have a section of code where I need to clear something I call one in.
[sourcecode language=’html’]



[/sourcecode]
Also take note of the line-height:0, this helps when IE likes to stick in padding and margins and borders and all sorts of other stuff you didn’t ask for!

Nice and simple!