jQuery and CSS: containing floats

Containing CSS floats can be a really tedious task. Basically, every container with floats should have a rule like the following:

.clearfix {
  overflow: hidden;
  height: 100%; /* IE6 */
}

But with jQuery we can easily avoid to add this class to the markup with a few lines of code:

$(document).ready(function() {
  $('*').each(function() {
    var $element = $(this);
   if($element.css('float') !== 'none') {
      $element.parent().addClass('clearfix');
   }
 });
});

That's all! By doing so, we keep our markup intact and we spare a lot of time! Do more with less: that's jQuery's motto. Isn't it amazing?