【入門】float、clearfixについて
floatについて
今回は、floatについて説明していこうと思います。
前までは、ナビゲーションメニューなどを作る時には、floatを使って作ることが主流でしたが、flexboxが登場してから並列させる場合は、こちらを使うようになりました。
それでも、まだ使うこともありますし、昔のサイトを修正する際にお目にかかることもあると思うので、解説していきたいと思います。
floatの使う場面
floatは、「漂う、浮く」といった意味で、HTMLで使うときも考え方はそのままです。div要素やp,h要素のようなブロックレベルの性質をもつ物は、デフォルトでブラウザーいっぱいの幅になるので、縦に並んでいきます。
しかし、インラインレベルの要素とブロックレベルの要素を並べた時に、下の図の様にインライン要素の横に無駄なスペースが出来てしまったりすることがあります。このスペースに入れたい場合などにfloatを使ったりして、回り込ませます。
タイトル
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
floatの使い方
floatを使うときは、回り込ませたい対象（位置）に対して使います。上の図の場合は、画像右横の隙間に文字を入れたいので、画像に対して、CSSに書き込みます。
CSS
|
1
2
3
|
img {
float: left;
}
|
|---|
そうすると、このようになります。
タイトル
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
これで画像の横に文字を置くことが出来ました。この状態がどのような状態になっているかというと、画像のimgが一つ上のレイヤーに上がったことになっています。言葉だけだとわかりづらいと思うので、画像を透過してみてみましょう。
タイトル
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
サブタイトル
画像の下もピンクになっているのがわかると思います。なので、そのまま書き進めるとサブタイトルもそれ以降に書いているものも下に入っていってしまいます。
これを解消する為にどこかでリセット（クリア）してあげないといけないです。
clearfixの使い方
上の図の続きになりますが、classでclearfixを作ってあげて、回り込みを終わりにしたい要素にclassで設定します。clearfixを作らずに終わりにしたい要素（今回はtextと書いてある所）にCSSプロパティで{clear: both;}を書くことも出来ます。webサイトなどを作っていると何回も使うことがあるので、classで作っておけば後で使い回しが出来ますので作っておく事をお勧めします。
CSS
|
1
2
3
4
5
|
.clearfix::after {
display: block;
content: "";
clear: both;
}
|
|---|
textから後ろを元に戻したかったので、class=clearfixをp要素に設定してあげて、その後ろからという事で、::afterを使っています。
タイトル
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
サブタイトル
そして、区切りをつける為に、displayをblockにします。次にcontentに空白を描き、擬似的にブロック要素があるようにさせます。最後にclearでbothを設定しています。このclearはleft,right,both,noneの4つで設定できます。今回は左に寄せているので、clearをleftに設定しても良いのですが、使い回しを考えて、両方に適用させる為にbothとします。
上の図は、わかり易くする為にcontentに”clearfix”をbackgroundに”yellow”を設定しています。
