TextMate snippet for clearing floats

July 14, 2007 code 1 min read

I often use positioniseverything.net’s CSS method for clearing floats without structural markup. The code for this technique is not something that I’ve committed to memory yet, so I’m referencing the article all the time (I could just copy it from another project, but it’s just so much quicker to type “css clear float” into google).

Well, positioniseverything.net is about to get several less page hits per week, because I finally threw the code into a TextMate snippet and assigned it the keyword “clearfix”.

${1:.clearfix}:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
$1 {display: inline-block;}
/* Hides from IE-mac \*/
* html $1 {height: 1%;}
$1 {display: block;}
/* End hide from IE-mac */
$0

Update: DRYed up based on Jacob’s comment.

This content is open source. Suggest Improvements.

— @bkeepers