TextMate snippet for clearing floats

July 14, 2007 code 1 min read

I often use’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, 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 */

Update: DRYed up based on Jacob’s comment.

This content is open source. Suggest Improvements.


avatar of Brandon Keepers I am Brandon Keepers, and I work at GitHub on making Open Source more approachable, effective, and ubiquitous. I tend to think like an engineer, work like an artist, dream like an astronaut, love like a human, and sleep like a baby.