ブログについて
flexboxとfloatのちがい2
2021.06.29
制作
技術
こんにちは、前回の記事に続き、今回は「float」と「flexboxとfloatの違い」についての記事です。
floatについて
floatは要素を横並びにしたい時に使用するプロパティです。
CSS3でflexboxが追加される以前は、横並びレイアウトはfloatで行うのが主流でした。
私がコーディングを学び始めたときにはもう既にflexboxが存在する世界でしたが、まずfloatを学んでからflexboxを教えてもらった記憶があります。当時はCSSのバージョンなどもあまり理解しておらず、こんなに簡単なものがあるなら初めからこっちを教えてくれ...と思っていました。しかし今考えるとfloatを学ぶことの大事さも感じます...!
floatの使用方法
flexboxは親要素にflexプロパティを設定することによって子要素を横並びにしていましたが、floatの場合は横並びにしたい子要素自体にfloatプロパティを設定します。
<html記述>
<div class=”wrap”>
<div class=”box left”></div>
<div class=”box right”></div>
</div>
html記述だけだと以下のように全ての要素が横幅いっぱいで縦に広がっています。
<css記述>
.wrap .box {
float: left;
width: 50%;
}
上記のように要素に「float: left;」を指定すると横並びになります。
プロパティ | 値 | |
---|---|---|
float | left | 要素を左に寄せる |
right | 要素を右に寄せる | |
none | floatを指定しない |
ただの横並びであれば要素両方に「float: left;」でも問題ないですし、左右に寄せたい場合はそれぞれleftとrightを指定します。
また指定していたfloatプロパティを解除する際はnoneを指定します。
floatの特徴と潜り込みの解除
floatの特徴としては、floatプロパティを指定した要素を”浮かす”ことで要素を横並びにします。(コーヒーフロートを想像したら覚えやすいかも)
つまりfloatプロパティを指定した要素は浮いているので、地に存在しないことになります。先程の場合だと、子要素は全て(.box)浮かせているので親要素(.wrap)は高さがなくなります。
どういうことかというと先程横並びにした要素たちの下に別の要素があったとすると、floatで上の要素が浮き、下図のように下に潜り込んでしまいます。ただし文字は潜り込まないため下にはじき出されている状況。
この状態を解消するために親要素に「clearfix」という指定が必要になります。
事前にcssに準備しておき、適用したい親要素にクラス指定する形が一般的かつ簡単な方法です。クラス名も「clearfix」「cf」など分かりやすいものがいいと思いますね。
<css記述>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ここまでを一通りしっかりと理解してfloatと付き合っていきましょう。
floatは崩れやすいなどと言われがちですが、floatのことを理解して優しく話しかければ割と柔軟に動いてくれるいいやつです。ただflexboxもいいやつなのでみな平和に...!
flexboxとfloatの違い
flexboxとfloatそれぞれの説明が終わりやっとこさ、この2つの違いについてです。
基本的な横並び構図の場合、どちらを使っても再現は可能です。そうなったときに指定の簡単さ、また崩れにくさなどからflexboxを使用することが主流です。
ではfloatはいつ使うのかというと、文字の回り込み等の場合に活躍します。
例として弊社過去ブログの一部分ですが、以下のように写真の右から下へ文字が回り込んでいるのが分かると思います。
この場合は左の写真だけをfloatで浮かせているので下のテキスト要素が写真の下に潜り込み、文字だけが回り込んでいる状況です。図で見ると以下のような感じ。
このようにfloatでしか再現できない形があったり、またいろんなサイトを見ているとまだまだfloatを多用しているサイトもたまに出会うこともあります。
まとめ
以上、2回に渡ってflexboxとfloatについての記事を書かせていただきました。
やはりflexboxが主流ではありますが、それぞれの良い点、悪い点を理解して適切な方法で実装できるようにしていけるといいなと思いますね。
今回の記事が少しでも参考になれば嬉しいです!