この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 floatとは？ float（フロート）はCSSで使用される配置用プロパティです。その目的と由来を理解する為には、プリントデザインを参照してみる必要があるでしょう。プリントレイアウトでは、場合によっては文章で画像の周りを囲ませることがあります。これは一般的に「回り込み」と呼ばれています。画像の例を見てみましょう。 ページレイアウトプログラムでは、プリントレイアウト同様に回り込ませることも出来るし、それを無視させることも出来ます。回り込みを無視させると画像は沈んでしまい、まるでそこに画像が無かったかのように文章が画像の上に重なって表示されてしまいます。これが回り込みをさせるかさせないかの違いとなり、WEBデザインにも共通してきます。 WEBデザインでは、CSSのfloatプロパティで指定された要素は、プリントレイアウトで述べたようにその要素の周りを文章が取り囲む状態になります。float指定された要素は無視されず、沈むことなく流れにそのまま浮かばせる（float）ことが出来るのです。これはabsoluteを用いて指定する、絶対配置と大きく異なる点です。絶対配置されたページの要素は、プリントレイアウトで回り込みを無視するよう指示された時と同じように、WEBページ上の流れから外されてしまいます。また絶対配置された要素は他の要素とは一線を画し、隣同士にあろうがなかろうが、お互いに一切影響を与えることはありません。 CSSでfloat設定をする場合は以下のように記述します： floatプロパティには4つの値があります。leftとrightはその単語の通り、左寄せもしくは右寄せを指定します。デフォルト設定はnoneで、要素が流れに乗ることはありません。すなわち回り込みすることはありません。最後にinheritはその要素を包含する要素（親要素）のfloat プロパティーを継承します。 一体floatの使い道とは？ 文章の回り込みを防ぐ用途は一旦置いておき、floatはWEBページ全体のレイアウトを作成することが出来ます。 floatはまたもっと細かい部分のレイアウトでも活用することが出来ます。以下の画像例を見てみましょう。例えばfloatをアバターイメージの配置設定の為に使用したとしたら、もし画像サイズが変更になったとしても、文章は自動的に調整されうまいこと表示されます。 これはrelativeを用いて枠組みの相対位置を指定し、absoluteを用いてアバターの絶対位置を指定すれば同じように再現出来るかもしれません。しかしこの方法では画像のサイズが変更されたときにうまく自動調整されることはありません。 floatのクリア floatと関連するプロパティとしてclearがあります。clearプロパティに指定された要素は、floatの流れに乗ることはなく、流れが無くなったところに身を置きます。文章で表すよりも画像を見ていただいた方が分かりやすいでしょう。 上記の例ではサイドバーはfloat設定で右寄せされており、メインのコンテンツよりも文章が短く終わっています。従ってその後に記述されたフッターはfloat設定の影響により、floatの流れに乗りサイドバーの下に表示されてしまいます。これを解決するにはフッターをどちらのfloatからもクリア（解除）させる必要があります。 clearにもまた4つの値があります。bothが最も一般的に使用され、どちらの方向から来る流れも遮断するため流れの影響を受けません。leftとrightはその単語の通り片方からの流れを遮断します。デフォルト設定はnoneで、ほぼ使用されることはないでしょう。inheritは一応5つ目の値となりますが、インターネットエクスプローラーではサポートされていません。右側もしくは左側の流れだけを止めることは自然界ではあまりないかもしれませんが、使い道はあるというものです。 大崩壊 floatを使った設定の中で非常に途方に暮れてしまうのが、どのような影響を親要素に与えるかです。もし親要素（すなわちfloatを包含している要素）がfloat指定された要素以外何も包含していなかった場合は、言葉の通り崩壊し高さが無くなってなってしまいます。もし背景設定などされていない場合には非常に気付き難いかもしれませんが、覚えておいた方がよいでしょう。 崩壊と同様、目で見ても分かりやすくはない状態でないので、次のケースはもっと最悪です。こんなシナリオがあったとしましょう。 もし上側のブロックエレメントがfloat要素部分も包み込めるよう自動拡張するならば、パラグラフ間の文章の流れに不自然なスペースが出来てしまい解決しようがありません。このようなケースではWEBデザイナーとしては先ほどの崩壊事件よりも声を大にして文句を言うべきです！ 崩壊現象の場合はそれぞれのブラウザでの問題や、レイアウトが変に崩れてしまうことを防ぐ方法を考えれば解決します。コンテナ内でfloat設定されている要素の後ろにあるものをclear設定すればよいのです。そのコンテナの外側の話ではないので気を付けましょう。 floatをクリアする方法 もし状況をきちんと把握しており、問題が起こらないと分かりきっているならばclear: bothをどうぞ使ってください。けれどなかなか世の中そんなにうまくことは運びませんし、もう少しfloatを解除する知識を付けておきましょう。 空っぽDIVメソッド： これは言葉の通り、空っぽのdivを記述することです。 /*例*/ <div style=”clear:both;”=</div= [/css] たまに<br /=タグや他のエレメントを見かけることもありますが、divの使用が一般的です。なぜなら、divそれ自体はデフォルト設定も無く、特別な機能も無く、CSSでスタイル設定されることもあまり無いからです。このメソッドは文脈上意味を持たないしプレゼンテーションのためだけに書かれているので、一部の真面目なセマンティック信者たちにはとても不評です。厳密に言えば彼らは正しいのですが、まぁこの方法でうまく解決して、誰も傷つかないのならいいのでしょうないでしょうか。 overflowメソッド： この方法では親要素にoverflowプロパティを設定します。もしoverflowプロパティが親要素にautoかhiddenで設定されていたとしたら、親要素はfloat部分を包含するために自動拡張し、実に効果的にクリアしてくれます。この方法は不要な要素を追加するわけではないので、セマンティック的にも問題ありません。しかしこのメソッドの為に新たにdivを追加するならば、先ほどの空っぽのdivと同様にあまりセマンティック的だとは言えないでしょう。overflowプロパティは元来はfloatを解除するために作られたものではないということも留意しておきましょう。またコンテンツを隠してしまったり、不要なスクロールバーを引き起こさないようにも注意しておきましょう。 簡易クリアメソッド： この方法はfloatを解除するために、見せかけのセレクター（:after)を使用します。親要素にoverflowプロパティを設定するのではなく、例えばclearfixなどと名付けたクラスを追加し、そのクラスにCSSでスタイル設定をしてあげればよいのです。 この設定はfloatを解除する親要素の後ろに、非表示の小さなコンテンツをぽちっと適用させています。けれど古いブラウザにも対応させるためには他にもコードを追加する必要があるので、完全解決とは呼べないかもしれません。 floatを解除する他の方法を見てみましょう。ここに違う種類のブロックが並んでいます。 同じ種類のブロックを見やすく並べるためには、この場合だと色が変わるたびに改行するのが良いでしょう。もし色ごとに親要素が設定してあれば、overflowメソッドか簡易クリアメソッドを使うことが出来るでしょう。もしくは色グループの間に空っぽdivメソッドを入れてあげても効果があります。どちらの方法を使うかはあなたにお任せします。 floatの問題点 floatは取り扱いが難しいことでしばし取り沙汰されます。その取扱いの難しさはIE6と、IE6のfloatに関するバグに起因することが大きいでしょう。もしIE6のサポートをしないと決めたらそんなに気にならないのでしょうが、どうしても気になってしまう方もいらっしゃると思うので簡単に説明しましょう。 pushdown： これはfloatの中にあるアイテム（大抵は画像）がfloat自体よりも大きい場合に発生します。殆どのブラウザはfloatの外側にはみ出して画像を表示しますが、他のレイアウトには殆ど影響しません。IEの場合は画像をきちんと包み込むためにfloatも拡張してしまうので、ときにレイアウトに大きく影響してきます。代表例としてはメインコンテンツからはみ出した画像が、サイドバーを下へ押しやってしまう現象です。 解決方法：はみ出してしまうような画像がないことを確認しましょう。またoverflow: hiddenを使ってはみ出した部分を切り落としてしまいましょう。 2重マージンバグ： IE6をサポートするために他にも覚えておいた方がよいことは、floatと同じ方向にマージン設定をした場合、マージンが2重（2倍）になってしまいます。 解決方法：floatにdisplay: inline設定をしましょう。それでもブロックレベルであることに変わりはないので心配しないでください。 3px Jog： これは、float設定された要素の隣にある文章が、何故か3ピクセル分離れて表示される現象です。 解決方法：影響を受ける文章に高さや幅の設定をしてあげましょう。 ボトムマージンバグ：これはIE7のバグで、float設定された親要素の中にfloat設定された子要素があった場合、子要素の下の部分のマージンが、親要素によって解除されてしまう現象です。 解決方法：親要素にbottom paddingの設定をしましょう。 代替え案 もし画像の周りに文章を回り込ませる必要があれば、float以外にあまり選択肢はありません。CSSを使って、イレギュラーな形に合わせて文章を回り込ませる方法も参考にはなるでしょう。けれど、ことページレイアウトの部分に関して言えば、float以外にも選択肢はあります。エリック・ソルさんが書いた「Faux Absolute Positioning」というアーティクルはとても興味深いテクニックで、絶対配置の良いところを残しつつfloatのフレキシブルな機能とうまく調和しています。CSS3が正式発表されれば、テンプレートレイアウトモジュールを使ってのページレイアウトも非常に役に立つかと思います。