Skip to content

Clearing CSS Floats Without Markup

This has done the rounds loads of times before – but clearing css floats is something I need to do all the time, and since I have to look up the code on every project I thought I would add it here so that I have a reminder.

This method uses css pseudo elements to do the clearing without adding random elements that contain ‘clear:both;’ which in turn means that the html is kept nice and clean and the css doesn’t interfere with anything else.

.clear{zoom:1;}
.clear:after{content:" ";display:block;visibility:hidden;clear:both;}
.clear:before{content:" ";display:block;visibility:hidden;}

Since I also use it with LESS here’s how I do that:

.clear {
	zoom:1;
	
	&:after {
		content:" ";
		display:block;
		visibility:hidden;
		clear:both;
	}
	&:before {
		content:" ";
		display:block;
		visibility:hidden;
	}
}

To use this just add the clear class to the element you want to clear.

<div class="clear">
<div class="float">Floaty thing here</div>
<div class="float">Floaty thing here</div>
</div>

Share

CSS Pen image from Shutterstock

4 Comments »

  1. Ben, this looks very cool and I’m all in favor of using less code and saving time. Can you show a brief example of what the html would look like. Do you add .clear to a content element?

    Now you can see I don’t understand…

    Thanks,
    Bob

    • Hi Robert – yeah, just add clear as the css class for the container of the floated items. I’ve added a small sample to the code above :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

I seem to find myself working with Youtubes thumbnail images quite a lot (for instance on Miniclips videos section) – and I am always having to go searching for the parameters to use to generate those thumbnail images. So I […]