Clearfix mixin/placeholder

clearfix.scss

@mixin clearfix {
  *zoom: 1;

  &:before,
  &:after {
    content: "";
    display: table;
  }
  
  &:after { clear: both; }
}

%clearfix {
  @include clearfix;
}

// usage
.main {
  width: 80%;
  margin: auto;
  @extend %clearfix;
}

.sidebar {
  float: left;
  width: 30%;
}

.content {
  float: left;
  width: 70%;
}

markup.html

<div class="main">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>