さよなら clearfix

投稿

display: flow-root(drafts.csswg.org)を使えば clearfix が要らなくなるという記事。

現在、 Firefox Nightly と Chrome Canary に組み込まれていて、両ブラウザでCodePen の display: flow-root デモ(codepen.io)にアクセスすると確認することができます。

  • Firefox は2017年4月リリース予定の53から対応(bugzilla.mozilla.org)。

とはいえ、未対応ブラウザのことを考えると clearfix を捨てさる日はもう少し後のことでしょうし、しばらくは @supports を使って両方に対応しておく必要がありそうです。 Sass の @extend ならこんな感じでしょうね。

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

  @supports (display: flow-root) {
    display: flow-root;

    &::after {
      display: none;
    }
  }
}

名前が %clearfix のままってどうなのよという気もしますが、"flow-root" の名称に関する議論(GitHub)もあるようですし、しばらくは様子見かなあと。