3300.me

clearfix_extend

// ie8 <=

%clearfix {
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

// ie8 >

$view-ie7 : true;

%clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
  @if $view-ie7 {
    & {
      *zoom: 1;
    }
  }
}

.foo {
  position: relative;
  padding: 20px;
  background: #eee;
  @extend %clearfix;
  h3 {
    position: absolute;
    top: -5px;
    left: -5px;
    padding: 10px;
    background: #ccc;
  }
  li {
    float: left;
    padding: 50px;
    background: #ddd;
  }
}

<section class="foo">
  <h3>h3</h3>
  <ul>
    <li>li</li>
    <li>li</li>
  </ul>
</section>

「h3」のようにはみ出る要素が無い場合は、clearfixの代わりに「overflow: hidden;」のみでも可