Projects Archives About
Follow
Ben Gillbanks
  • November 11, 2012
  • Print Preview

Clearing CSS Floats Without Markup

spacer 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;
	}
}

CSS Pen image from Shutterstock

Share

Twitter
Facebook
Google+
Pinterest

Elemental powers Binary Moon

A flexible WordPress Theme Framework, perfect for designers.

More Info ›
About The Author

Ben Gillbanks

Web Designer, Video Gamer, Blogger, and part time Entrepreneur. Read More

One thought on “Clearing CSS Floats Without Markup”

Leave a Reply Cancel reply

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

*

*

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

Websites linking here

  1. Clearing CSS Floats Without Markup

My Projects

Pro Theme Design - WordPress Themes Pro Theme Design

Premium WordPress Themes

Elemental - WordPress Theme Framework Elemental

WordPress Theme Framework

TimThumb - Image Resize Script TimThumb

Image Resize Thumbnail Script

WPVote - WordPress Social Voting WPVote.com

WordPress Social Voting Site

About me

About BenMy name is Ben Gillbanks. I'm a lover of Video Games, WordPress, Web Development and everything in between.

I have been working on the internet since 1998, and working with computers even longer. I am a hardcore Nintendo fanboy and have owned most of their consoles at one stage or another.

Read more about me on my about page.

My Tweets › Binary Moon

  • spacer

    One Essential Characteristic of a Pro Blogger [Not Your Everyday Blog Writing Advice] t.co/CrT7Kcn5

    2 hours

  • spacer

    RT @prothemedesign: Sent my first newsletter campaign for Pro Theme Design last night! - t.co/E3z5hA4y

    4 hours

My Sites

  • Pro Theme Design
  • Ben Gillbanks
  • Veggie Advisor
  • WordPress Vote
  • Binary Joy
  • Binary Sun

Most Popular

  1. TimThumb - PHP Image Resizer
  2. Disney - The Little Mermaid - Julianne Moore and Michael Phelps
  3. Disney - Cinderella - Scarlett Johanson
  4. Toy Story 3 Woody
  5. Disney - Little Mermaid - Queen Latifah
  6. Disney - Snow White - Rachel Weisz

Random Link-outs

  • Totebo Flash games with monkeys
  • Red Root The online home of Luke Williams
  • Myles Noton
  • Pro Theme Design Premium WordPress themes
  • Front Row Reviews News and Reviews for the latest movies
  • Binary Sun Games for everyone

Keep Updated

Stay Updated

Binary Moon

WordPress and Web Development › home of Ben Gillbanks

Twitter Pinterest Facebook Google+ Stumble Upon
‹
Related searches:
design binary clearing content markup
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.