CSS：Clrefixについて再考しました。

長い間、「class=”clearfix”」にお世話になっておりました。
しかし、これもメンテナンスする時期かなーと再考することにしました。

旧 clearfix

私がよく使っていたclearfix

全くメンテしてなかった＆お客様にIE利用者の方が非常に多かったこともあり
上記を長年使い続けておりました。

けれど、「マイクロソフト「IE」、旧バージョンのサポート終了へ」とのニュースもあり
もう一度再考することにしてみました。

今回、ご参考にさせて頂いたのは、
株式会社TAMさんのエントリーで「もう一度、「clearfix」について考えてみた。」です。
ありがとうございます。

新 clerfix

すでに「clearfix」ではなくなっていますが、こちらを利用することにしました。
これはsection、div、ulの直後に自動でfloatを解除してくれるので便利―。
「class=”clearfix”」って書かなくていいなんて！ソースもキレイになるし、書き忘れもなし！スバラシイ！

ついつい、年数がたったままメンテしてなかったですが今回これにしてとても楽になりましたー

flexboxについて　　※2016/01/18追記

「flexboxにすればそもそもcleafixいらないのでは？」とのご指摘いただきました。ありがとうございます。
言われてわたしも「あぁ！」となったのでした・・・。
HTML組むことが少なくなっていたので、flexboxは知っていましたが、実務ではまだ使ったことがなかったのですっかり忘れておりました。
以前は、IE9以下未対応だったのでスルーしていたのですが、今は対応するためのライブラリもあるそうです。

ただし、IE9が特に対応しなくていいのならもう「flexbox」の方がいいのではと思います。
使い方は株式会社LIG様の「CSS3のFlexboxを基本から理解して、使い倒そう！」がすごく丁寧に解説されているのでとても参考になりますよ。