overflow: hidden と clearfix

僕は昔から overflow: hidden 派 (?) だった。けど、最近 clearfix のアプローチも使うようになりだした。

clearfix のスタイル:

.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

そもそもこういったものを使う主な場面といえば、float を使って要素を横に並べた上でコンテンツの領域を確保したいときとか、リストアイテムの内右端のアイテムの余白だけマイナスマージンを使って消したいときとかになる。

で、これまでは overflow: hidden でも特に問題というほどの問題は起きなかったが、box-shadow を使い出すようになってからちょっと面倒なことになってきた。overflow を指定する場所にもよるけど上下左右、どこかの影が切れる。

• Demo | JSFiddle

clearfix のようなヘルパークラスはできれば使わないほうが良いと思ってる。けど、こういうときはやっぱり便利だ。

これからは clearfix と overflow: hidden、上手く使い分けていきたい。...が、似たような意味のスタイルを 2つ使うのはあまり良くないかもとか、少し考えさせられるところもある。