floatのclearについて
ネタ元：mixiコーダー組合コミュ 「トピ立てるまでもない質問はこちら」トピックの質問97
以前「float関連の問題で覚えておくべき５つの対策 」でもfloatについて取上げたことがあるのですが、今回はfloatのclearについてのお話。floatの解除方法について。
そもそもどうしてclearが必要か
- α：親ブロックの高さが算出されず、背景が表示されないから
- β：後ろにくる要素にも影響がでる場合がある
多くの場合は、この２つが理由でしょうね。floatを解除しなければ表示が崩れたりするし。。。だから、多くの場合、floatをした場合はその後ろでfloatを解除する必要がある。
float要素の後に要素が来るかどうか
floatをシンプルにclearさせるには、floatさせている要素の後ろで、且つ、親要素の終わる前までになんらかしらの要素がある必要があります。
図で言うAの位置に要素があるかどうか。通常、シンプルな方法でclearさせるならこの位置の要素にて、clearを入れる。左のみのfleatの時はclearはleftだけでいいですし、逆もまた然り。左右へのfleatの場合はbothを指定する。つまり、bothでの指定が無難。
問題はAに要素がなく、親要素の終わりが来てしまうなんてパターン。そのパターンも良くあると思う。
その場合は、昔であれば<br clear="all" />とかで対応していたときもあった。でも、br要素でclearなんて邪道だ！とか、brによって余計に空間ができるなんかの問題もあって、かなり使われなくなったと思う。
もし、これと似たようなことをするとしたら、空divを加えて、cssでclearさせるのが無難だと思う。
と、本題はこれらではないので、次の話へ。
clearfixかafterか
mixiの書き込みでは、clearの他にこの二つがでていましたたが、基本的なことを考えるなら、どちらもafterなんですよね。おそらく、classに適応させるプロパティ郡として、clearfixを作って、それを利用するか、それとも要素ごとにafterをつけるかどうかという話なんだと思います。とすると、この二つのどちらがいいのかという話になってくると思います。
個人的には運用スタイルによってきめたらいいんじゃないかな〜なんて思っています。clearさせる箇所が大量にある場合は、afterを都度設定するのも時間がかかるし、何よりソースが多くなるので、適応箇所が多い場合はclearfixを使うのがいいと思います。classにclearfixなんて名前をつけていいのかどうかなんて話にもなりますが、その件については今回は省略。
しかし、１ページ(もしくはサイト全体)に１箇所とか２箇所しかない場合は、afterがベストだと思います。clearfixという部分を設けなくてもいいですし、何よりclassの名前のつけ方とか気にしなくてよくなる。それすらも気にするなら、やはり一つ一つにafterの設定ですね。最近は、特に問題がないのであればoverflow:hiddenなんかでも対応します。むしろ、そのほうが楽ですが、hasLayoutをtrueにしたりする設定も必要なので、これもケースバイケースかなと思います。
結局なにがいいのか
一番なのは、floatの後ろの要素でclearをすること（空タグとかの利用を除く）。その次にafter、そしてclearfixなんじゃないでしょうか。といっても、先ほどの図のようなケースじゃない限りclearで問題ないので、clearわからずにclearfixとかafter連発しないというのも、大切な一つなのではないでしょうか。
