overflow:hiddenを使用したfloat解除と使用しないfloat解除のサンプル

overflow:hidden使用


overflow:hidden未使用

<h2>overflow:hidden使用</h2>
<div class="box">
  <i></i>
  <div class="a"></div>
  <div class="b"></div>
</div>
<hr>
<h2>overflow:hidden未使用</h2>
<div class="box2 clearfix">
  <i></i>
  <div class="a"></div>
  <div class="b"></div>
</div>
.box {
  overflow: hidden;
  position: relative;
  width: 100px;
  background: gray;
}
.box2 {
  position: relative;
  width: 100px;
  background: gray;
}
.a {
  float: left;
  width: 50px;
  height: 50px;
  background: red;
}
.b {
  float: right;
  width: 30px;
  height: 50px;
  background: blue;
}
i {
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: green;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* SASSを使用しているならmixinを作成して
  @include clearfixで読み込む

  Compassの@include clearfixは
  overflow: hiddenを読み込むので使用しない。

@mixin clearfix {
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}
.foo {
  @include clearfix;
}
*/