コーラフロートって最高だよな

あの氷が侵食された時のシャリシャリがたまらんよね

食べたことないけどね

ね・・・。

 

まずfloatについて理解しよう

コンテンツの回り込みと言えば「float」を思い浮かべる人多いと思います。

「floatって苦手~(;´д`)」

もしかしたらあなたはこう感じてるかもしれません。

「float」はCSSのプロパティの中でも躓きやすいプロパティだと思います。これが難関で挫折する人もいます。

なのでまずはfloatついて説明します。

floatの設定で良くある失敗や疑問

  • 幅が足りなくて下に落ちる
  • 下の要素が上がってきて重なってしまう
  • float:leftなのに右に回り込んでるやん!

まあこんなところですね。管理人も経験が山ほどあります(^^ゞ

前提として押さえておきたいのは「float」は”浮く”って意味です。”回り込む”ではありません。この間違った認識が全てをややこしくしています。

コードで見る浮くという事実

”浮く”という意味合いを理解するなら以下のようなコードが分かりやすいと思います。

実行結果

floatの実行結果

まず#contentAに「float:left」を設定することにより「A」が浮き上がります。正しい解釈をするブラウザであればこの時点で「A」が浮いたことにより空いたスペースに「B」が入り込み、「A」と「B」が重なって表示されます。

そこで#contentBに「margin-left:105px」と指定することで「B」が「A」の右側に並びます。

「A」を左側に浮かせることで並んだように見せる。これが「float:left」です。

このように捉えると自然な感じしません?

 

では以下のコードはどのような表示になるでしょうか?

実行結果

floatによる重なり

「A」は浮いているので無いものとして扱われて「B」の下に「C」が来てしまい「A」と重なってしまいます。

ですが文字列はちゃんと重ならない位置にズレて表示されるようになっています。imgタグにfloatを設定しただけで文字が横に来るのはこの機能のおかげですね。

複数の要素を浮かせた場合

複数の要素をfloatさせるならli要素を使って以下のようにすることが多いと思います。

 

実行結果

複数のfloat指定

floatはこのような使い方が最も一般的だと思います

複数の要素に「float:left」を設定した場合、順番に左に浮いていき、収まらなくなると下段に並んでいきます。

この場合ul要素の子要素であるli要素すべてが浮いている状態なので、ul要素は空っぽです。そのため高さが「0」になっています。「background-color」を設定しているのに色が付いていないのはそのためです。このままだと下の要素が潜り込んでしまいます。そこで「clear」を設定しfloatを解除して回避します。

floatさせた最後の要素の直下の要素(あえて妹と表現)にclearを設定します。

しかしli要素をすべてをfloatさせているのでclearを設定できるがいません(泣)

そこで以下のように書きます

実行結果

afterでのclear

ul要素の背景にグレーがかかり、直下の要素がきちんと表示されるようになりました。

こうやって擬似的に妹を生成すればノープロブレムです。

floatの設定のポイント

最初の概念的な話しはザックリ覚えておけばOKです。重要なのは

  • 擬似要素を用いてfloatを解除する
  • 横幅をきちんと計算する

この2点さえ抑えておけばfloatは使えます横幅の計算が上手くいかないと隙間が空いたり、下に落ちたりしてしまいます。

横幅を綺麗に収めるコツ

  • 「box-sizing: border-box」を使う
  • 「margin:0」に出来ればする
  • 「%」などの相対単位を使用する
  • 「calc()」を使って動的に計算する

上記を駆使すればレシポンシブデザインであっても常にピッタリと収められます。

これでfloatはきちんと使えるはずです。

inline-blockの使いどころ

ではinline-blockはいつ使うのでしょうか?まず言えるのはfloatの設定が面倒なときですw

上記の方法を理解していれば問題ないのですが、考えるのが面倒ならinline-blockで対処してしまいましょう。

高さが不揃いの時に使う

inline-blockが力を発揮するのは高さがバラバラの場合です。floatでは高さが不揃いだと2段以上を横に並べるのは困難です。その場合はinline-blockを使います。

ただinline-blockは標準で隙間が出来てしまいます。この隙間のせいでピッタリと収めることが出来ません。隙間を消すことは可能ですが、floatの設定より面倒です。

そんなときの救世主こそが「flex」です!

これを使えばすべてが解決します。floatもinline-blockも過去の存在に成り下がります^^;

でもちょっと長くなってしまったのでflexの使い方は別の記事で紹介しますね。

まとめ

今日のポイントは

  • floatは浮くという当たり前の事実を認識する
  • 末っ娘は疑似にかぎる
  • 横幅を制御するテクニックは押さえておく
  • 高さが不揃いならinline-block
  • flexが全てを解決

 

じゃあfloat要らなくね?

と、思うかもしれませんが管理人はfloatの修得はCSS全体の理解には必要なものだと思います。

プログラミングで言うところの並び替えのアルゴリズムみたいなもので、とりあえず基本は理解しているという物差しの役目をするかなと思います。

あとflexはfloatやinline-blockと違い親要素に指定します。この違いのせいでflexが使えない場面もあるかもしれません。

そんなわけでまずはfloatを使えるようしてみてください(^^ゞ