レイアウトに多用するCSSの「float」プロパティ。
これの悩みといえば、回りこみがかかったものの「解除」です。
大昔は、回りこみを解除させたいところに、こういうのを入れるのが流行りました。
<div style="clear:both;"> <!--回りこみ解除用消さないで！--> </div>
とか
<br clear="all" />
こういうのです。
これで解除できるのですが、
「無駄にスペースが入る」「HTML的にそれどうなの」「見た目悪い」
などの理由で全く人気なし。
そんな中現れたのが、「clearfix」でした。
これについて詳しくは、こちら。
floatを解除する手法のclearfix と 次世代のレイアウトの話
clearfixは上に書いた問題点をクリアしているので、とてもよくできていて、たぶん使ってないサイトはないんじゃないかってぐらい。
個人的には:afterで余計なもの入れるってことよねこれも。。。と思うけれど、これまでに比べたらどう考えてもましなので、この方法を使います。
上記のページには、clearfixとはちょっと毛色の違う解除方法として以下のことが書いてあります。
floatを解除する方法は、clearfixだけではありません。
overflow: hidden;を使用する方法もあります。
詳しい方法は参考サイトを見ていただきたいですが、端的に言うと、回りこみをする要素の親要素にoverflow:hidden;を書くだけ。
これ、先に言った「:afterで余計なもの入れる」こともなく、素敵な方法。
これも、最近よく使います。
使うんですが、ちょっとした問題もある。
例えば、はみ出す要素が見えなくなる。
position:absoute;でちょっとはみ出した設定にして、アクセントを。。。。とかやろうとすると見切れちゃう。この手のレイアウトをしたい時だと、非常に相性が悪いと感じました。
要するに、overflow:hidden;と本家のclearfixは、回りこみを解除するための方法についての考え方が違うので、「同じように使う」のはダメなんだな・・・、というのが思ったことです。
どっちがいいのか？
使う場面によっては相性が悪い「overflow:hidden;」よりも、「clearfix」の方が汎用性が高いと言えるのではないでしょうか。
私は、「clearfix」をベースに使いつつ、繰り返す要素であった場合は、クラスが増えるのはちょっと嫌だな・・・と思うので、「overflow:hidden;」を使う、という風に考えています。
この先のこと
おそらく、参考サイトにも記述があったように、floatを解除するための、より根本的な方法（例えば専用のCSSプロパティが追加される、など）が考えられて実用化されるんじゃないかなあ、と思っています。困ってる制作者いっぱいいるんだし、今ここで挙げた解除方の多くは構文の面で問題もあるので（昔に比べたらずっと害が少ないから妥協ができる範囲ではあるけれど）。
float解除の根本的な打開策早く来い来い。
参考サイトのほか、こんな風にやってるぜ、的なことをまたコメントにてお聞かせ下さいませ。