CSSのclearfixにoverflow:hiddenを使用してはいけない理由

float解除のclearfix

float解除のためにoverflow:hiddenが使用されることがある。

.box {
  overflow: hidden;
  width: 100px;
  background: gray;
}
.a {
  float: left;
  width: 50px;
  height: 50px;
  background: red;
}
.b {
  float: right;
  width: 30px;
  height: 50px;
  background: blue;
}

しかし、このoverflow:hiddenでfloat解除を使用する方法は使用しないほうが良い。

理由は子要素をabsoluteなどで親要素の外側に表示できなくなるのとoverflow:hiddenがfloat解除に使用されているのか子要素が親要素の外側にはみ出した際に非表示になるように指定しているのかがわかりづらいからだ。

外側にはみ出した際に非表示になる

例えばある要素の左上にアイコンを表示したい場合、親要素にposition:relativeを指定して子要素にposition:absoluteを指定して左上に配置するのだが親要素にoverflow:hiddenが指定されているとはみ出し部分が非表示になる。

overflowの意図がわかりづらい

下記のようにoverflow:hiddenが記述されている箇所があるとする。

.foo {
  overflow: hidden;
  width: 400px;
  height: 300px;
}
.bar {
  overflow: hidden;
  width: 400px;
  height: 300px;
}
.baz {
  overflow: hidden;
  width: 400px;
  height: 300px;
}

.foo, .bar, .bazの子要素のfloatの記述が近くに書かれている場合はこれらのoverflow:hiddenがfloat解除のために書かれているものだということがわかるが、ファイルが分けられているなど近くに記述がなければ当然これらのoverflow:hiddenが何のために指定されているのかがコードを見ただけではわからなくなってしまう。

間違って削除されるかも

何のために指定されているのかがコードを見ただけではわからないということはほかの作業者に不要な記述だと判断されて削除されるリスクがある。

Compassのclearfixは使用しない

Compassで@include clearfix;を記述するとoverflow:hiddenが読み込まれるので使用してはならない。

SASS利用者はmixinを作成

SASS利用者はmixinでclearfixを作成して@include clearfix;で使用できるようにしておく。

.clearfix::afterというCSSクラスを作成してHTML側にclass="clearfix"を追加するやり方は運用性や保守性が悪いのでやってはならない。

/* BAD */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/*

<div class="foo clearfix"></div>

 */

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

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