「floatってどう使えばいいの？」
「floatって必要なの？」
こんな悩みにお答えします｡
CSSのfloatはdisplay:flex;を使うことで代替できるため､現在､ほとんど使う必要がないです｡
唯一､floatでしかできないことは､画像などに文章をまわりこませるときのみです｡
See the Pen 回り込み float by hashi84 (@hashi84) on CodePen.
私は､2015年頃からWeb制作の仕事をはじめて､160件ほどのWebサイトを制作してきました｡
その間､いろいろな失敗を繰り返し､クライアントからのフィードバックや本などで勉強することにより､多くのノウハウを得ることができました｡
この記事では､以下のことを解説しています｡
- floatとは
- floatのメリット､デメリット
- floatの使い方
記事を読み終えると､floatを使わないといけない案件をうけてしまった場合でも､floatを使ってWebサイトをつくることができるようになります｡
- 目次
floatとは
floatは英語で「浮遊」という意味であり､要素を本来ある場所から浮遊させて移動させるプロパティです｡
要素を横並びさせるプロパティではなく､HTML文書の中に画像などを差し込む､文書をまわりこませることが本来の使用目的です｡
CSS3が普及する前は､要素を横並びにするためには必須のプロパティでした｡
現在､floatでできることはdisplay:flex;を使うことで代替できるため､ほとんど使う必要がないプロパティになっています｡
floatでしか実現できないことは､画像などに文章をまわりこませることです｡
現在､具体的にfloatが必要になる案件は…
- 5年､10年前につくられたWebサイトの修正が必要な場合
- 何らかの事情により､古いブラウザ対応が必要な案件をすることになった場合
とはいえ､マイクロソフト自体が､IE11のサポートを順次終了していっており､多くのWebサイトがIE11のサポートを外している状況です｡
このような案件をけてしまうとあとから痛い目にあうことも予想されるので慎重に検討したほうがいいでしょう｡
floatを使ったことがない初心者であれば､学習コストのわりに今後役に立つ技術でもないので､受注は避けたほうがよいと思います｡
- tableレイアウト
-
floatの前は､レイアウトにtableを使っていました｡
tableをレイアウト､デザインに使うことは本来の使い方ではないということで非推奨になり､floatを使うことが一般的になったという経緯があります｡
tableレイアウトの時代は経験していませんが､レスポンシブコーディングがあたりまえになった現在ではtableレイアウトでコーディングされたサイトをみると絶望してしまいます｡楽天市場の商品ページなどは今でもtableレイアウトになっています｡
PCとスマホでHTMLソースが切り替わるようになっています｡
floatを使うメリット･デメリット
メリットは､古いブラウザにも対応できること
floatは､display:flex;が使えない古いブラウザにも対応できることがメリットといえます｡
正直､メリットといえるのはこれくらいです｡
ただ､floatは非推奨になっているわけではなく､新しいWebサイトで使ってはいけないというわけではないので､古いブラウザ用､新しいブラウザ用と書き分ける必要はないということは小さなメリットかもしれません｡
デメリットは､取り扱いが難しくデザインがくずれがおきやすい
floatはそもそも横並びをするためのものではないです｡
(ソースが見つからないですが､個人的にはそう思っています)
そのため､デザインのために要素を横並びにするとデザインが崩れることが多いです｡
以下の例の場合､横並びで3列に並んでもらいたいですが､高さが大きい要素が1つでもあると､改行があったときにそこで詰まってしまいます｡
これはdisplay:flex;ではおきないことです｡
See the Pen float よくある失敗 by hashi84 (@hashi84) on CodePen.
これを回避するには子要素の高さを指定する必要があります｡
ただ､子要素の高さを指定しまうと今度は子要素内のコンテンツがoverflowする可能性もあり､JavaScriptを使ったほうが自由度が高くなります｡
floatを使ってカードデザインの一覧ページをつくる場合は､matchHeight.jsなどを使うと高さが自動的に揃えることができデザインが崩れるということがなくなります｡
floatの使い方
基本的な使い方
一般的には以下のような場面で使います｡
現在ではdisplay:flex;やdisplay:grid;で実現できることですが､以前はfloatを使うことが一般的でした｡
- カードデザインを使った一覧ページ
- ヘッダー
- フッター
- 2カラム以上のレイアウト
以下の例のように､おもに「float:left;」を使い左寄せします｡
floatさせた子要素が親要素の幅を超えたら自動的に改行して並びます｡
この例のように高さを指定して揃えてある場合はいいですが､高さがない場合､投稿のような何文字入るか不確定なデザインの場合､デザインが崩れやすいので注意が必要です｡
floatを解除する方法
floatを使うときに難しいのは､floatを使ったあとには必ず解除をしないといけないことです｡
ここが初心者にはやや難しく感じることです｡
clearプロパティ
floatさせた要素の他に兄弟要素がない場合､親要素に高さがなくなります｡
// float: left; float: right; どちらも解除します clear: both; // あまり使いません clear: left; clear: right;
divでclear:both;させるだけの空要素をつくって､float解除させていることもありますが､空要素自体が非推奨なのでおすすめはできません｡
※わかりやすくsytle属性を使っていますが､classを使っても同じです｡
<div style="clear:both;"></div>
overflow: hidden;
floatを使った子要素の親要素に「overflow: hidden;」させることで､float解除ができ､親要素に高さができあがります｡
「overflow: hidden;」をメインに使っていた時期もありましたが､はみ出しを使ったあしらいがあるデザインだと､はみ出した部分が見切れてしまうので､凝ったデザインがある場合に苦労しました｡
そこまでデザインにこだわりがない場合などでは使ってもいいかもしれませんが､そもそも使い分けすることが混乱を招くので推奨はしません｡
overflow: hidden;
疑似クラス：clearfix
floatを解除する方法としては､clearfixがいちばんいいです｡
親要素に「clearfix」というclass名にすることが多いですが､「cf」とか省略されていることもあります｡
古いサイトを修正する場合などに､なんとなく覚えておくとよいと思います｡
.clearfix:after {
display: block;
clear: both;
content: "";
}
CSSで横並びにする方法は以下の記事にまとめています｡
HTMLどうやって横に並べるの？CSSで要素を横並びにする方法 5選
HTMLコーディングのときにどうやって横並びさせればいいか悩んでいますか？この記事では横並びさせる方法を具体的に5つ紹介しています。ぜひご覧ください。
まとめ
CSSのfloatについて解説しました｡
- display:flex;を使うことでだいたいのことが代替できる｡
- floatでしかできないことは､画像などに文章をまわりこませること｡
- display:flex;が使えないような古いブラウザ対応が必要な場合には必須｡
- 解除には「clear」「overflow:hidden;」「clearfix」などの方法がある｡
- 理解することが難しいので､あえて時間をかけて学習する必要はない｡
floatを使わないといけない案件をうけてしまった場合でも､floatを使ってWebサイトをつくることができるようになります｡
