floatは浮くという意味があるが、指定した要素を左または右に寄せて、後続を反対側に回り込ませます。
float:left; 左寄せ
float:right; 右寄せ
よくflexboxと比べられflexboxの方がレイアウト崩れなどがなく使いやすいですが、floatにしか出来ない表現があります。
それがこちらです。
画像の右と下に回りこんでテキストを表示する方法です。
よくニュースサイトなんかであるレイアウトですが、これはfloatでしか表現できません。
ただこれ以外はflexbox使った方がいいんじゃないかって思ってます。
floatの特徴
floatは浮くという意味です。浮いているので、背景などを設定している際にはレイアウトが変な形に崩れてしまう場合があります。
※imgタグなどのインライン要素はそのまま書けば、自動的に「横並び」にはなります。
以下はdivタグに背景色を付けたものです。四角全てにfloat:left;を適用させて横並びにしています。この場合は特にレイアウト崩れが発生していません。
では、赤色の四角から下に改行したい場合はどうればいいでしょうか。
黄色（sample3)のfloat:left;を削除してみるとこうなります。
黄色の四角が水色の下に潜り込んでしまっています！
これが浮いているということで、レイアウトが崩れてしまっています。。。
これを直すにはどうすればいいのか
ここでclearプロパティの登場です。
clearプロパティについて
floatを扱う上で必ずといっていいほど必要になる知識がclearプロパティです。
clearプロパティはfloatプロパティで左寄せや右寄せなど指定された回り込みを解除するために使用されます。
- clear:left; 左寄せされた要素に対する回り込みを解除
- clear:right; 右寄せされた要素に対する回り込みを解除
- clear:both; 左寄せ・右寄せされた全ての要素に対する回り込みを解除
基本的にはfloatを解除したい場合はclear:both;を適用すれば問題ありません。
黄色の四角に対してclear:both;を適用させると
問題なく赤色からfloatが解除され黄色の四角が下に来るようになりました！
が、しかし・・・
黄色の四角にmargin-top を適用させてみましょう
marginが反映されません！！！
実はこれがfloatの問題点でもあります。
floatによって水色、赤色は浮いている状態になっており、marginの余白が測れない状態なっています。
こういったときに活用できるのが、clearfixというものです。
sample1とsample2に親要素のdivを付けてclass=”clearfix”をつけています。
こうすることで、marginの余白を計ることができ以下のようにmarginを設定することができます。
コメント