clear:both;のためにoverflow:hidden;を使うのはもうやめにしよう

最近はdisplay:flex;によるフレックスボックスだのなんだのでCSSによるレイアウトの組み方は随分と効率的になってきている気がする。
それでも、未だにfloatは現役だ。

floatを使うときには、clearによる回りこみの解除をどこで指定するかを考えなくてはならない。
後に続く要素が確定しているのならば、そこでclear:both;なり何なりかけてあげればいいのだけれど、そうでない場合もある。
そうすると、他の方法を考えなくてはならない。

clearfixでfloatは解除できるが…

floatを解除する方法としては、clearfixが有名だ。
clearfixの手法としては、擬似要素にclear:both;を指定することで、要素単体でfloatを解除できるようにする。

clearfixでは通常、.clearfixや.cfといったクラス名を作成して、そこにfloat解除のための記述をする。
つまり、HTMLにはclearfixのためのクラスを追加する必要がある。これは多分、あまりスマートではない。
clearfixと同様の記述を各クラスに追加する、という方法もあるが、それは正直面倒でoverflow:hidden;を使いたくなる。

overflow:hidden;でfloatは解除できるが…

僕が今まで使っていた方法は、親要素にoverflow:hidden;を指定することで強制的にfloatを解除するものだ。
この方法も有名だけれど、欠点もある。
まず、overflow:hidden;の振る舞いをさせたくない場合に困る。
それに後からコードを見たときに、そのoverflow:hidden;が何の意図で付けられているかわからなくなる。これは、自分でCSSを修正する時にも厄介だし、他人が見るのならなおさら厄介だろう。
この方法も、やはりスマートではない。

Sassのmixinでfloatを解除する!

mixinを使えば、この問題が解決する。Sass万歳。

使い方は、まずclearfixのmixinを定義しておいて、

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

clearfixを指定したいクラスで使用するだけ。

.hoge {
  @include clearfix;
}

今更感のあるネタだけど、ぜひ使っていきたい。

SassSass, CSS, HTML

Posted by WebMemo