[CSS]floatプロパティの具体的な4つの使用方法、解除のやり方と注意点

CSSのfloatプロパティの使い方について解説していきます。

CSSにおいてfloatプロパティはかなり重要で、デザインをコントロールしていくうえで欠かすことはできないのですが、使い方を一歩間違えれば全体的なデザインが崩れてしまう可能性もある、やや癖のあるプロパティでもあります。

しかし、しっかりと使い方を理解しておけば思うようにレイアウトを構築できるようになりますので、きちんと抑えておきたいですね。

floatプロパティとは

英語のfloatとは[浮く・漂う]という意味になりますが、CSSの世界では浮くというよりか、「漂う」という意味合いが強いように思います。

floatプロパティでは、指定した要素（セレクタ）を指定した方向に振る事ができます。また、その後に続く要素に「回り込み」を発生させます。要素を振るだけなら問題ないのですが、この回り込みの仕様がやっかない事を招く事があります。

プロパティの値には、[left][right][none]が使用できます。

HTML構造は、基本的に左に回り込んでいく仕様になっていますので、float[left]はあまり必要ないと思われるかもしれませんが、場合によっては必要になります。

[none]は、float設定をなしにしますので、設定を解除したい場合、特にPCサイトをスマホ対応のレスポンシブ仕様にする際などに使っていきます。

floatプロパティ使用での注意点

floatプロパティには、その後に続く要素に、引き続き回り込みをさせる効果があります。

例えば以下のようなHTML場合には、下のようになります。

上記全て[div]でありますので、ブロック要素です。

しかし、[FLOAT2]に[float: right;]を以下のように当てると、下のようになります。

この時、本来なら黄色の[FLOAT2]より一段下がっているはずの[FLOAT3]が、左に回り込んで[FLOAT1]の直下にきています。

構造的にこれで問題なければいいのですが、問題がある事も多々あります。

そんな時には、floatを解除する処理が必要になります。

float解除の処理をすると以下のようになります。

floatの解除処理は、場合によっては不要な時もあるかもしれません。しかし、最初はレイアウトが正常に見えていたけれども、なんらかのタイミングで別要素が引っかかってしまい原因不明の悪さをする可能性もあります。ですので、私の場合は、どんな状況でもfloatを設定したタイミングでfloatの解除設定を同時に設置するようにしています。

floatの解除処理方法

それでは、具体的にfloatの解除処理の方法をご説明致します。

1.直後の要素に[clear: both;]を当てる

上記の実装例Aでは、特に親要素があったり、他の要素にfloatがかけられている要素もありませんので、floatをかけた要素の直後に[clear: both;]を当てると解除する事ができます。

2.擬似要素afterを使う

親要素があったり、他の要素にfloatがかかっている場合、その他とにかく解除できない場合には、まとめて親要素に解除処理を当てる方法があります。個人的にはこちらの方がよく使います。

floatプロパティを当てた要素の親要素[xxx]に対して以下のCSS設定を行います。

上記を日本語で説明すると、[xxx]の親要素の直後をブロック要素にし、擬似要素afterの設定ペアである[content]には[""]と何もいれず（空白）にし、[clear: both;]でfloat設定を解除します。という意味合いになります。

なかなかイメージしにくいかもしれませんが、これはこの形で覚えるという事で問題ないと思いますので、floatをかければこの設定をするという具合で覚えておきましょう。

擬似要素の[:after]に関しては、以下の記事よりご確認ください。

clearfixを使った解除方法

floatプロパティは結構頻繁に使いますので、上記のような擬似要素設定を毎回のように書くのはやや手間です。

そんな時によく使われるのが、[clearfix]と呼ばれるテクニックで、[clearfix]というオリジナルクラス名を1個だけ用意しておき、必要がある度にHTMLに直接インラインでクラスを追記していく方法で、以下のような形になります。

具体的なfloatプロパティの使用方法

floatプロパティの使用方法は大きく分けて４つになります。

1.ブロック要素を横並びにする

ブロックを横並びにする場合は、要素をインラインブロックにする方法もありますが、その方法だと左詰めでブロックが構築されていきますので、両端を揃えるのに若干直感的な操作が劣ります。

とは言っても、全然問題なく利用できる構築方法ですので、場合によっては使っていきましょう。私の場合は、ブロックが２個の場合はfloat、それ以上の場合はインラインブロック化して対応するようにしています。

2.要素を単純に右寄せにする

要素（以下の例では「NO.1」）を単純に右寄せにする場合があります。

例えば以下のようなHTML構造の場合は、「記事の見出し」の横に「NO.1」が続く形になります。

「NO.1」がブロック要素だと[text-align: right;]で対応可能なのですが、[span]には文字の領域が確保されていませんので、要素自体を振る必要があります。

では、最初からブロック要素の[div]や[p]で構築すれば？となりますが、そもそもブロック要素だと「記事の見出し」の横にはくる事ができません。

その際に使用するのがfloatになります。

3.ネガティブマージンの設定

ネガティブマージンを設定する際にもfloatは役立ちます。

ネガティブマージンの事に関してまとめた記事を用意しておりますので、詳しくはそちらからご確認お願い致します。

4.文字を回り込みさせる

あえて文字の回り込みを利用する場合もあります。

Yahoo!ニュースなどでは多様されているテクニックではありますが、一般的なブログ記事などでは写真が小さくなることや、回り込みの処理がやっかい、そもそも古いテクニックなのであまり多用されないように思います。

実装例

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

まとめ

いかがでしたでしょうか？

CSSで利用するfloatプロパティは、サイト構築する上でかなり重要な要素となりますが、回り込みの仕様により意図しない挙動になったりもしますので、使い方は要注意です。

floatを指定した要素には一般的に[clearfix]と呼ばれる回り込みの解除がほぼ必要になりますので、「float設定＝解除の設定もする！」と覚えておきましょう。