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


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

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

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


さて、そんなBootstrapですが、Bootstrap 3.xのCSSとBootstrap 4(4.0.0-alpha.2)のCSSを見ていたら、float要素を解除するclearfixのCSSが「ああ、ここまで短くなったのか~」と感じたので、紹介します。


2019年5月のBootstrap 4の最新版がBootstrap 4.3.1がリリースされているので、追記もしました。

目次 [ 隠す ]
Loading...

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のページ

カテゴリー:

このページをぜひシェアしてください

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

リアクションやコメントをどうぞ