概要 回り込みを解除するCSSのclearfixはBootstrapのバージョンが上がる度に短く。対応ブラウザーの違いによって変わってきたようです。

20160716-BootstrapのCSSのclearfixを最新版もチェック-01

みなさん、Bootstrapを使ってWeb制作していますか?

私の勤めている会社もMovable Typeで管理しているサイトはほとんどBootstrapのフレームワークに移行して、制作とメンテナンスがかなり楽になりました。Bootstrapはドキュメントが豊富なので、参考になる情報が多く便利ですね。


さて、そんなBootstrapですが、Bootstrap 3.xのCSSとBootstrap 4(4.0.0-alpha.2)のCSSを見ていたら、float要素を解除するclearfixの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の2/3/4のclearfixの違いを紹介しました。

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

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


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


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



●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索