最近使ってるclearfix（2017年版）

2017/03/09

section:after,
article:after,
div:after,
ul:after {
content: “”;
clear: both;
display: block;
}

display:tableやdisplay:flexをつかうようになってそもそもfloatをあまり使うことがなくなったのでそのうちこれもいらなくなるかなとは思うんですが、でもまぁ文字の回り込みとかには使うよね。

その昔はIE対策でもっとながい記述が必要でしたが、最近は対応ブラウザのバージョンもあがっているのでこれにしておりました。

よくclear使う要素にあらかじめおまじないをかけておく方式ってやつですね。

これでhtml側のclass=”clearfix”から解放されます。

・・・っておもってたら思わぬところでひっかかりました。
しかもfloatじゃなくてdisplay:flexで。

flexをかけてかつjustify-content：space-between；で均等に幅をあけようとおもったら最後尾にへんな隙間が。右ぞろえにならないぞ。
なんだこれって検証した結果このclearfixでつくっている疑似要素分の隙間でした。

というわけでおまじない方式を使う場合
・flexでspace-between適応した要素のafterをdisplay: none;
・おまじないはdisplay: none;にしといてfloatをつかった時に親要素afterにdisplay: block;
のどちらかの対応が必要ということに。
flexをよく使うようになったからこそ1行増えるってのが皮肉ですね。

やっぱりflexをよく使うようになった今はおまじないはやめて
.clearfix:after {
content: “”;
clear: both;
display: block;
}
でfloatつかったら親要素にclassをつけましょうってことにしたほうがシンプルなのかもしれない。