動作に問題がなかったものだから、安心してすっかり追跡調査を忘れていた「CSSでfloat指定を解除する方法」を確認する機会がありました。調べものをしていてほとんど偶然に判ったのですが、昨今の最新ブラウザ類がHTML5に対応したことにより大分シンプルな記述ですむようになっていました。
以下、情報元です。（感謝）
- もう一度、「clearfix」について考えてみた。
- floatを解除する手法のclearfix と 次世代のレイアウトの話
- よくご存知でない方はfloat(フロート)を解除する3つの方法をご覧になってからだと良いかと思います。
私もセレクタ名はclearfixを利用してますが、ついにこれだけ！
.clearfix:after {
content:"";
clear:both;
display:block;
}
上の情報元にもあるように2004年に擬似要素（:after）を利用した記述が現れたあとに、自分なりにいろいろ調べて行き着いたのが次の記述（注：情報元と異なります）で、つい先週まで10年近く使っていました。（なまけました。いかんね。）
.clearfix:after {
content:" ";
clear:both;
height:0;
display:block;
visibility:hidden;
}
.clearfix {min-height: 1px;}
* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}
それで2011年にもうひと波あった様子で、今でもIE6とIE7をターゲットにするのであればまだ有効な記述だと思います。IE6とIE7のシェアは、2016年8月現在、Net Applicationsで確認すると合わせても1%程度しかないので、行政とか金融、保険関係のサービスサイトでもなければもう必要がないと考えます。
.clearfix:before,
.clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
それと、overflowを利用した解除方法もよく取り上げらますが、個人的にfloatと属性概念の異なる印象なので納得いかずに、利用には至っておりません。（蛇足）
最後に、シンプルになった記述を使って任意のディビジョンエレメントに解除を仕掛けておくことも上の情報元で紹介されてました。
div:after,
ul:after {
content: "";
display: block;
clear: both;
}
それもあって疑問を持ったのですが、ということは元々すべてのブロック要素には解除機能が付いていて良かったんでないとふと思い？「display:block」と記述するとその要素の終了とともにfloat指定が解除されるだけで良いような気がしてきたのですが、おかしいでしょうか？と、私が思うぐらいだからW3Cとかの賢い人たちが気か付かないわけはないと思います。なんか矛盾の生じる仕様があるのかもしれません。ま、問題なく使えれば私は満足です。