【css】2021年！clearfix最新の設定はこれ！

floatの回り込み解除の方法としてよく使用されるclearfixですが、一時期は多くの旧ブラウザーに対応する必要があり、書き方も複雑なものが多くありました。
しかし、最近ではインタネットエクスプローラー（IE）の古いバージョンへの対応が必要なくなったことや、IE以外のブラウザーの規格も以前ほど差はなくなりはじめていることから、clearfixの設定もよりシンプルで実用的な書き方に変わりつつあります。
今回は、時代に合ったclearfixの書き方でお悩みの方のために、私が、これが最新版！と考えるclearfixの書き方を提案いたします。

floatの回り込みにつてはまずこちらの記事をご確認ください。

【css】floatで回り込みを解除する方法「clear」と「clearfix」

要素を横並びにする際よく使われるのが「float」ですが、他の要素がどんどん横にながれこんできて困ったことはありませか？たとえばこんな感じに。。。 ...

ブラウザー対応範囲
clearfixの書き方

ブラウザー対応範囲

実際のclearfixの書き方の前に、私が考える最低限対応しておくべきブラウザーバージョンの範囲をお伝えしておきたいと思います。このことについては、クライアント様がいる仕事の場合はその要望に合わせる必要があるのでしょうが、私は下記ぐらいまで対応しておけば問題ないと考えており、またそういった提案をするようにしています。

Google Chrome、Firefox、Safari、Opera、Microsoft Edge　最新のバージョン
IE11以降

clearfixの書き方

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

.clearfix:before {
　　　　content: "";
	display: block;
	clear: both;
}

.clearfix {
	display: block;
}

.clearfix:after {

content: "";

display: block;

clear: both;

}

.clearfix:before {

　　　　content: "";

display: block;

clear: both;

}

.clearfix {

display: block;

}

疑似要素:before,:afterをそれぞれ、ブロック要素に変更して、clear: both;を追加、.clearfix をdisplay: block;に変更します。
これだけで、上記であげたブラウザーでなら完全に対応可能です。疑似要素:before,:afterが使えなくなるのはマイナス点ですが、今までのやり方にくらべたらとてもシンプルで使いやすくなりましたね。
clearfixの設定はこのまま使えますので是非ご活用ください。

「clearfix」の使い方や、floatで回り込みを解除する方法はこちらで解説しておりますので是非読んでみてください！