（2019年更新）【CSS】最新のclearfixがどんどん短く。Bootstrap 2/3/4のCSSを見て

clearfixの原点

float要素を解除するclearfixのCSSの原点は、オーストラリア人のTony Aslettという方だそうです。

CSSは以下の通り。

.floatcontainer:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
.floatcontainer{
	display: inline-block;
 }
/* Hides from IE Mac \*/
	* html .floatcontainer {
	height: 1%;
}
.floatcontainer{
	display:block;
}
 /* End Hack */

なんだか懐かしさを感じますが、最近まで（というか先週まで）私の勤めている会社の印刷通販のサイトはMac用Internet ExplorerのHackが入りっぱなしでした（苦笑）。どんだけCSSのメンテナンスしていないんだよ。

Bootstrap 2.3.2のclearfix

Bootstrap 2.3.2の時代はどうだったのでしょうか。

Bootstrap 2.3.2の対象ブラウザーはドキュメントによればInternet Explorer 7もサポート対象の時代ですね。なお、Bootstrap 2.3.2はまだWebフォントを使っていなかった時代で、カラムの幅指定もpx指定の固定値でした

Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

Bootstrap

clearfixのCSSは以下の通りです。

.clearfix {
	*zoom: 1;
}
.clearfix:before,
.clearfix:after {
	display: table;
	line-height: 0;
	content: "";
}
.clearfix:after {
	clear: both;
}

「zoom: 1」あたりが、Internet Explorer 6/7の「hasLayout」を利用したclearfixですね。

「*zoom」なあたりがHackな書き方で、今はあまり見られないですね。

Bootstrap 3.3.6のclearfix

2016年7月の時点では現役のBootstrap 3ですが、対象ブラウザーとしてはInternet Explorer 7は外され、Internet Explorer 8以降になりました。

Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 8-11.

Getting started（Bootstrap）

Bootstrap 3.3.6のclearfixは以下の通りです。（.clearfix以外の要素は削除しています）

.clearfix:before,
.clearfix:after {
	display: table;
	content: " ";
}
.clearfix:after {
	clear: both;
}

かなり短くなりましたね。

おもしろいなと思ったのは「:after」だけでなく、「:before」の設定もあったこと。clearfixというと、floatした要素の後ろにつっかえ棒的な要素を差し込んで回り込みを解除するというイメージがあったので、「:before」の記述は意外に感じました。

Bootstrap 4.0.0-alpha.2のclearfix

さて、まだ開発中の次世代のBootstrapであるBootstrap 4ですが、現在Bootstrap 4.0.0-alpha.2版として公開されています。

Bootstrap 4の対象ブラウザーはInternet Explorer 8が外れて、Internet Explorer 9以降です。

Bootstrap supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 9-11 / Microsoft Edge.

Browsers and devices（Bootstrap）

Bootstrap 4.0.0-alpha.2のclearfixは以下の通りです。

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

シンプル！

table的な表示をする要素作って回り込みを解除、ただこれだけ。

Bootstrap 3も「:before」の部分をなくせば同じなのですが、Internet Explorer 8が外れたことなのかそれともAndroid 5未満はサポートしなくなったからなのか、もっとシンプルになりました。（この点、どなたか教えて頂けると嬉しいです…Android 4.xの人もまだ多いだろうし）

※よくみると「:after」ではなく「::after」の書き方にも変わっていますね

Bootstrap 4.3.1のclearfix

ここは2019年に追記しているのですが（2019/05/16）、2018年1月にBootstrap 4がリリースされてからかなりの時間が経ちました。

2018年1月18日（米国時間）、オープンソースCSSフレームワーク「Bootstrap」の最新バージョン「Bootstrap 4」が正式リリースされた。最新バージョンでは、CSSメタ言語を従来の「LESS」（Leaner CSS）から「Sass」（Syntactically Awesome Stylesheets）へ変更したり、CSSのFlexboxをデフォルトで有効にしたりするという2つの主要なアーキテクチャ変更を中心にさまざまな変更が行われている。

「Bootstrap 4」が正式リリース――IE10以降、iOS 7以降、Android 5.0以降に対応：Sass、Flexbox、npm - ＠IT

clearfixも変わっていないだろうと思っていて、ふと確認してみたらアルファ版から微妙に変わっていたので掲載します。

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

display:tableからdisplay:blockに変更されていますね。

Bootstrap 4のアルファ版の時にはInternet Explorer 9は対象でしたが、正式リリースの際に対象外となったので、その点が影響しているのかもしれません。何はともあれ、変更されている事実はお伝えしておきます。

というわけで、Bootstrapの2/3/4のclearfixの違いを紹介しました。

Internet Explorer 9とAndroid 5未満を無視できるのであれば、以下のclearfixが（Bootstrap的には）最新版ということになります。

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

それではよいBootstrapライフを。

参考にしたページ・CSSのページ

• float解除の決定版。clearfixを考えたら、進化した。（Web Design KOJIKA17）
• Bootstrap 3.3.6のCSS（Bootstrap CDN）
• Bootstrap 4.0.0-alpha.2のCSS（Bootstrap Git）
• Bootstrap 4.3.1のCSS（Bootstrap CDN）