Nice to meet you. I'm Daniel, passionate learner and maker.

The very latest new new way to do "clearfix"

July 04, 2013 - programming - permalink

Thierry Koblentz:

.cf:after {
  content:"";
  display:table;
  clear:both;
}

To be honest, I have never used the clearfix hack in a production app before. I'm one of those guys who until today used the old way of applying a <div class="clear"></div> and a css class .clear { clear: both; } at the end of floated elements to clear them out. I tried to apply some other new ways of clearing floated elements before, but somehow I always got stuck somewhere and it didn't really worked out for me.

Today I think I found my resolution. The above code snipped seems to be the latest hipster way of doing it. So far it has also worked out for me and with the use of some Sass @extend magic I might not even need to add additional markup to my HTML/Sass files in the future. Cool.

comments powered by Disqus