css 新旧 clearfix の書き方に関するメモ

最近は css も色々書いている。というか、渋々色々やっているという面があるのだけど、それは置いておいて。

昔からある css のメンテなどをすることになると、歴史上の色々な書き方に遭遇することもある。その中で clearfix についてメモしておく。まあ知ってる人達からしたらあたり前なことなんだと思う。

いつも以下の新しい方で書いていたけれど、古い方と出くわして、これどう違うの？という疑問があった。

古い方の :before は IE6/7 の為らしく、自分の場合もう切り捨てているのでいらないということになる。

display: table / block については何やら挙動が違う。自分は block でよい。

古い方

.clearfix {
  &:before {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
    content: "";
    display: table;
  }
}

新しい方

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

ちなみに、前にも調べたことがあるような形跡を見つけた。確かにそんな気はするし、どうせまた忘れるのかもしれない。

日常