【CSS】floatの動作とclearfixをおさらい

最近はflexboxという超便利なプロパティがあるので複雑なことにはだんだん利用されなくなってきそうなfloat。でも一度ちゃんと検証してみようかなということで今回はfloatとclearfixです。いまさら感満載。

CSS float って何？

floatとは<div><p>のような要素を「右や左に寄せるプロパティ」といったイメージでしょうか？ブログで使われる2カラムや3カラムの構造なんかでもよく見かけますよね。

通常div要素をそのまま記述すると縦に並びます。今回は3つのdivそれぞれにwigthとheightと背景色を指定したものを用意してみました。

<div class="left1">Left1</div>
<div class="left2">Left2</div>
<div class="left3">Left3</div>

.left1{
  width : 15%;
  height : 80px;
  background : darkgray;
}
.left2{
  width : 20%;
  height: 120px;
  background : lightpink;
}
.left3{
  width : 25%;
  height : 150px;
  background : darksalmon;
}

これにfloatプロパティを付けてあげることで横並びにすることができます。

floatの値と書き方

floatには次の4つの値があります。

none : フロートをやめる(初期値)
left : 左に寄せる
riht : 右に寄せる
inherit : 親要素のfloatの値を引き継ぐ

inheritはほとんど使うことはありませんね。

floatプロパティの記述の仕方

float : 値 ;

ためしに先ほどのdiv要素を左に並べてみましょう。

.left1{
  width : 100px;
  height : 80px;
  background : darkgray;
  float : left;  /* 左に寄せる */
}
.left2{
  width : 120px;
  height : 120px;
  background : lightpink;
  float : left;  /* 左に寄せる */
}
.left3{
  width : 160px;
  height : 150px;
  background : darksalmon;
  float : left;  /* 左に寄せる */
}

まずは3つの要素全てにfloat: left;を付けてみました。きれいに左に寄りましたね。左から順番に1,2,3と並んでいます。これが基本的なfloatの使い方です。
続いてfloatを一部だけに指定してみましょう。

floatを指定した次の要素が回り込む

さて先ほどは3つの要素全てにfloatを指定しましたが,2番目以降の要素のfloatを指定しないとどうなるでしょうか？

.left1{
  width : 100px;
  height : 80px;
  background : darkgray;
  float : left;
}
.left2{
  width : 120px;
  height : 120px;
  background : lightpink;
  /* float : left; */ /* floatを指定しない */
}
.left3{
  width : 160px;
  height : 150px;
  background : darksalmon;
  /* float : left; */ /* floatを指定しない */
}

Left2 の表示がおかしいことに気付きます。それではひとつずつ見ていきましょう。

まず Left2 と Left3 は分かりやすいです。floatの指定が無かったのでfloatしない。つまりLeft2とLeft3は縦に並びます。

では問題の Left1 と Left2 なのですが,これは「 Left1 が float されたために浮いた状態になった」という状況です。「Left1 の下に Left2 が回り込んだ」とも言えます。Left1がノートでLeft2が下敷きのような状況を想像してもらえれば分かりやすいかもしれません。文字は表示できるところに回り込んでいますね。

この後 Left2 まで float: left; を指定して試すとまた疑問点が出てくるのですが正直キリがないので今回は次に行きます。

floatすると親要素の高さが無くなる

なんのこっちゃですが先ほどの3つのdivを横並びに戻した状態でそれをぐるりと囲む親要素を付けてみましょう。

<div class="container">
  <div class="left1">Left1</div>
  <div class="left2">Left2</div>
  <div class="left3">Left3</div>
</div>

containerクラスが親要素、Left1~3が子要素になります。
そして親要素にはwidthの指定と背景色を付けてボーダーも引いてみます。

.container{
  width : 580px;
  background : lightblue;
  border: 1px solid #25a;
}

さてさてどうなったでしょうか？

おおっと！上の方にボーダーらしきものは見えますが全体を囲ってくれていません。これは実は「中身である子要素が全部floatで宙に浮いちゃってるから高さが存在しない（高さが0）ことになっちゃってるよ！」という状況です。「背景を指定したのに表示されない」なんて時はこれかもしれませんね。ということで解決方法を検討してみます。

親要素にheight(高さ)を指定する

height: 200px;など具体的な数値を入れて指定すれば高さが発生するのでちゃんと背景が表示されました。

ですが中の子要素がいつも固定されているとも限りませんのであまり現実的ではないかもしれません。

あえて回り込む要素を入れる

親要素の中に回り込む要素が入っていれば自動で高さが出ます。

<div class="container">
  <div class="left1">Left1</div>
  <div class="left2">Left2</div>
  <div class="left3">Left3</div>
  <p>吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
</div>

一見ちゃんとしたように見えますが、次のように後続の要素にも影響が出るのがfloatであるのでした…！

floatしたらclearで解除が必要

container（親要素）に続く後続の要素を追加してみます。そして問題を分かりやすくするためにp要素の文章も削ってみます。

<div class="container">
  <div class="left1">Left1</div>
  <div class="left2">Left2</div>
  <div class="left3">Left3</div>
  <p>吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。</p>
</div>
<div class="next-container">
  Next Container
</div>

.next-container{
  width : 600px;
  border: 1px solid #f55;
}

結果はこうなりました。

さきほどのp要素の文章を短くしてcontainerの高さを低い状態にしてしまうとnext-containerがfloatした要素の下に回り込んでしまっているのが分かります。floatを解除して要素が回り込むのをやめさせましょう。

この回り込みを解除するのがclearプロパティ、そしてclearfixと呼ばれる手法です。

css clearの値と書き方

clearプロパティの値は次のようになります。

both : 左寄せも右寄せも解除
left : 左寄せされた要素に対する解除
right : 右寄せされた要素に対する解除

clearプロパティの記述は次のようになります。

clear : 値 ;

今まではこのclearを入れる要素が親要素にない場合に空の<div>などを用意したりしていましたが現在はclearfixという手法が一般的になっているのでそちらを利用します。

clearfix

親要素にclear用のクラスを指定して子要素のfloatを解除する手法です。モダンブラウザ用の記述はスッキリとシンプルになっています。

.clearfix::after {
    content : " ";
    display : block;
    clear : both;
}

こちらを親要素に足します。

<div class="container clearfix">
  <div class="left1">Left1</div>
  <div class="left2">Left2</div>
  <div class="left3">Left3</div>
</div>
<div class="next-container">
  Next Container
</div>

するとどうなったでしょうか。

無事floatが解除され後続の要素がきれいに続きました。長かったですね。
clearfixは色々と奥が深いようなのですが今回はこの程度にします。

overflow : hidden;を使う

親要素にoverflow : hidden;を付けるとclearfixのようにfloatの解除と同じ効果が出ます。
しかしこれは少しでも親要素からはみ出すところはバッサリ切られ、box-shadowなどを使いたいときに表示してほしいところがやっぱり切られたりすることもありあまり好まれていないらしいです。
clearfixはclearfixで親要素のafter要素を使ってしまうので気を付けないといけませんね。

float:left;とright;をごちゃまぜにしてみる

最後にfloat : left;の要素とfloat : right;をごちゃまぜにしてみます。
明らかにwidthをオーバーする感じで配置するとどうなるでしょうか。
ここまでくるとなんとなく分かってくるような気がします。
ぜひご覧ください。

See the Pen css/floatあれこれ by Leaf (@studioleaf) on CodePen.

はいカオスー。
というのは冗談にして。

とりあえず記述した順に並べようとする。
widthが足りなくなったら下に落ちるがなるべく上に付く形で左右に寄せられる
floatされていないpは隙間に入ってる

という感じでしょうか。
こちらのLeft,Rightの要素を交互に入れ替えたりp要素を入れる位置を変えたりp要素にwidthを付けたりするとさらに色々と変化します。よろしければ試してみてください。

ということでfloatに関するあれこれでした。長かった…。