Generated by SassMeister.com.

clearfix.css

.container-with-floated-children:before, .container-with-floated-children:after {
  content: " ";
  display: table;
}
.container-with-floated-children:after {
  clear: both;
}

br {
  clear: both;
}

clearfix.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

%clearfix {
  &:before,
  &:after {
    content: " "; 
    display: table;
  }
  &:after {
    clear: both;
  }
}
// example of usage

.container-with-floated-children {
  @extend %clearfix;
}

%clear {
  clear: both;
}

br {
   @extend %clear;
}