float崩れを”clear”で解除する便利すぎる3つの方法！【CSSテクニック】

 

やぁ、甘い飲み物ばかりのんで虫歯人間のユトピ(@yutopi60pa)だよ。
 
 

今日はCSSのfloatプロパティとclearプロパティを組み合わせたCSSテクニックを紹介していきますぜ。
 

floatにはいろいろな問題点があるのは知っていますか？親要素の高さが無くなったり、要素が回り込まないなどなど、のちほど詳しく見ていきますが、これが結構面倒くさい。誰しもが一度はハマるところです。
 
ということで今日はこのfloatの問題点をclearプロパティを使用した2つの解決策+おまけ1をご紹介しようとおもいます。
 
 

floatの問題点

 

まずはfloatの問題点をおさらいしましょう。
floatはレイアウトをする際に非常に便利なプロパティなのですが、いくつかの厄介な問題が発生しますので、そちらを見ていきましょう。

 
 

 
これはfloatをした子要素を含む”親要素の高さ”が消滅してしまう問題です。
実際は親要素がfloat子要素の高さを認識していないのです。
 
floatは読んで字のごとく、要素を浮かせて左に寄せたり、右に寄せたりしていますので、浮いた状態のfloat子要素を親要素は認識できません。
 

親要素にfloat子要素以上の高さが指定されていれば高さは復活しますが、やっぱり子要素の高さを認識できていないのは問題なので、ここはなんとか解決しないといけませんね。困ったものだ・・・。(´・ω・`)

 
 

※スマホの場合は画像になっています。
 

これはfloatを指定した要素の後にくる通常の要素がfloat要素の下にもぐり込んでしまう問題です。
 

これもさきほどの親要素の高さが消えるのと同じで、float要素は浮いているのでその下に通常の要素が潜り込んでいってるために起こっている現象です。
 

floatの場合、後にくるものが反対側へ回り込むというのはfloatのところで見ていきましたね。※レイアウトで失敗する前に！CSSプロパティ「float」の使い方と問題点書いてあります。
 

ここで回り込むものというのは要素ではなく、内容です。
デモでは文字だけが回り込んでいますよね。
 

このように要素が回り込まずに潜り込んでしまうのも厄介な問題点です。
 
 
他にも状況によってはfloatによるいろいろな崩れが出てくると思います。
もうこんなやついらないんじゃね？
 
残念ながらものすごく使います。
なのでここからはこの問題点の解決方法を紹介します。
 
 

float問題のclearを使った解決方法

 
floatの問題の解決には「clearプロパティ」を使用します。
clearは回り込みを解除する効果があります。詳しくはこちらの記事を参考にしてください。→絶対に知っておきたい！便利すぎるCSSプロパティ「clear」の使い方
 
それではさっそく行きましょ！
 
 

空のdiv要素にclearを指定する方法

 
これはfloatをかけた要素の親要素の最後に、なにも入っていないdiv要素を追加して、それにclearを書けるやり方です。
実際に見てみましょう。
 
 

 

※上のデモでは便宜上clearを指定した要素に背景や幅、高さも追加していますが、実際は必要ないので、デモのように表示されません。
 

このように親要素のあとに空のdiv要素を追加してclearを指定してあげれば、

親要素の高さが復活します！

 

これは一昔前によく使われてきたテクニックです。
 
しかしデメリットもあります。
HTMLの文法上、意味のない要素の記述は好ましくありません。
空のdiv要素はCSSでは意味があっても、HTMLとしては意味のない要素になってしまいます。
 
たくさんのところにfloatを指定した場合は、空のdiv要素も増えてしまうことがあるので、それもあまりよろしくないですね。
なので最近ではこの方法はあまり使われなくなってきました。(HTML的におかしいなら最初から使うなよという感じですがね)
 
しかし！これに代わる方法がもう1つあります！それも紹介しましょう！
 
 

clearfixを使う方法

 

この方法が現在はもっともメジャーなものです。
「clearfix」とはCSSのプロパティではなく、テクニックの名前みたいなものです。
HTMLにclearfixというクラスを付けて、CSSで記述していきます。
clearfixをつけるのはfloatされた要素の親要素につけます。
 

実際にやってみましょう。
 
 

 

あらま不思議！

親要素の高さが復活しました！

 

このclearfixを使えば余計なHTMLを書く必要もないので、非常に便利ですね。
 

基本的にコードのところで書いたものをコピペして使っても動作します。使う際は必ずfloatを指定した要素の親要素につけるようにしましょう！
また、クラス名は必ずしもclearfixじゃなきゃいけないわけではないので、好きな名前に変えてもらっても大丈夫です。
 

ちなみにこのコードは今現在(2016年8月)の最新版で、非常に短く書くことができます。
 

もともとのコードはもっと長かったのですが、そのときに応じてどんどん改良されていっています。
いまのところ、float問題を解決するにはこのclearfixが最良の方法となっています。
 
 

おまけ clearを使わない方法

 

ここからはおまけ。
float問題を解決するために、散々clearを推してきましたが、実はclearを使わない方法もあります。
ここで使うCSSプロパティは「overflow」です。
 

親要素にoverflowの「hidden」を指定すれば、親要素の高さを復活させることができます。
overflowでhiddenを指定すると、ブロックが形成されて、floatされた要素や親要素の高さも取得することができるようになります。
 
さっそく見てみましょう。
 
 

 

このように親要素にoverflow:hiddenを指定すれば、高さが戻ってきますね。
これは今まで紹介した方法のなかでは一番記述が短くすむやり方です。
 

しかし「overflow:hidden」には本来、ボックスからはみ出した要素を隠すという効果があります。
それを考えると、単純な構造なら大丈夫ですが、複雑な構造のHTMLだと不都合も生じてしまいます。
消えてほしくないところが消えてしまったり、box-shadowなどを指定すると影が途中で切れてしまうこともあります。
 

ですので、僕としてはoverflowのやり方は注意を払いながら使った方が望ましいと思います。
でもやっぱりclearfixを使う方法をオススメします。
 
 

まとめ

 

どうでしたか？
このようにfloatとclearを組み合せば特有の問題が解決できちゃうんです。
 
floatは本当によく使うので、このテクニックも様々なところで実践されています。
ですのでこれは必ず使えるようにしときましょうね。
 
CSSには他にもたくさんのテクニックがありますので、また便利なものを見つけたら紹介していこうと思います！
それではもう眠い(午前4時)なので寝ますね。ばいちゃ！

 
 
質問や意見がありましたらお気軽にツイッターの方へどうぞ。

 
ユトピのツイッター
@yutopi60pa