float | CSS電光石火

• floatとは

•  

本来floatは文中において、とある要素を右寄せ、左寄せなどにする際に使用します。例えば、このサイトでも一部img要素（画像埋め込みのための要素）が右寄せで文中に挿入されていますが、これが一般的な本来のfloatの使用方法といえます。
このfloatはブロック要素を画面の端に寄せる際にもよく使用されます。
なお、先ほど一般的、と書きましたが、CSSを使ったレイアウトの最大の特徴として、floatによるマルチカラム・レイアウト、という手法が存在しています。この手法はマルチカラムに対する便宜的なアプローチですが、このことについては現時点では込み入った話になりかねませんので、後述します。

• 使用方法

•  

以下を見てください。

•  
• フロートブロック

  文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。
•  

floatプロパティは、このように文中に挿入された場合、文章の内部に埋め込まれたような表示になります。詳しく説明すると、文中にて灰色の部分で示されるフロート部分が右側に回りこみ、文章を避けるのです。
では、仮に上記の要素にフロートが無い場合、どのような表示になるのでしょうか？

•  
• フロートブロック

  文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。文中にブロック要素を表示します。
•  

floatプロパティを使用しない場合、上図のような表示となり、文章は回り込みません。
したがって、floatとは、とある要素の中身に挿入した場合、挿入した要素内部で常に回り込もうとする性質をみせ、その際改行コードは付加されない存在、であるといえます。したがって、floatの無い二番目のコードは、改行コードがしっかりと付加されているのがお分かりいただけると思います。
このfloatプロパティは別段右側に特化された指定ではなく、左側へと寄せる事も可能で、その場合はfloat:left;と指定します。一般なfloatの使用方法としては、左側に寄せるケースの方が多くなるでしょう。その理由は後の章で述べたいと思います。

本来CSSには早急にマルチカラムデザインの方向性を決めるべきでした。より詳しく言うならば、CSSの草案、策定を進めるW3Cがこれを執り行うべきでした。詳しい話は以下に譲りますが、実のところ、現時点でhtml、CSSともにマルチカラムレイアウト（段組）を意識した規格は「ありません」CSS3のマルチカラムレイアウト仕様（columnプロパティ）も、ブロック化したカラムとして認識されるものではなく、あくまで一つの要素をニ段組にしたり、三段組にしたり、といった用途でしか使用できません。その際カラムがいくつ分離していても指定要素は一ブロックとして認識します。したがって段落ごとの装飾等を行いたい、サイドバーを左につけて右がメイン、といった仕様にしたい場合は、columnではなく別の指定でハックしなければなりません。
一方で、段組の代わりにdisplay-tableという手法を用いる手段もありますが、これもただ単に今まであるブロック要素をテーブル要素へと変化させてしまうというだけであり、本来の段組の意図とはやや異なります。
このように、現時点ではまともな「要素ごとの段組」を実現するプロパティは存在していない現状があります。
ですので、今後はもしかするとhtmlの進化によってタグ側で意味づけがなされるかもしれません（※あくまで予想の範囲を出ませんが）
勘違いの無いように言っておきますが、column-から発生する各種プロパティがマルチカラムの定義として不正であるとは思いません。
ただし、段組の指定方法としては現実的ではないと言わざる得ない印象があるのも確かです。

W3Cはマルチカラムもそうですが、ほか様々な策定を遅らせてきた張本人です。しかしながら、W3CはWEB規格標準化団体であり、ある一定の時代においてはその役割を存分に発揮してきた存在でもあります。
混乱したhtml4.01の世界を整然としたxhtmlへと移行させ、CSSによるレイアウト分離を提唱したのもW3Cです。
ところが、最近になり情勢は変化しています。あまりに現実離れした、ある意味アカデミックでガチガチな草案の数々に、各ブラウザベンダーが反旗を翻したのです。そうして最近になって生まれたのが「WHATWG」です。WHATWGは時代遅れで型ばかりを重視する、時期規格xhtml2.0に見切りをつけ、html5の協議に乗り出しました。これにはApple、Mozilla、Operaという主要ベンダーが参加しており、現実に即した実装と機能を盛り込もうと奮闘中です。
もちろん、こうした働きは本家であるW3Cとも連携して進められています。
なお、IE6のバグで多大な被害をもたらしたMicrosoftは、このグループには参加していません。WEB黎明期に活躍し、やがて嫌われるようになったMicrosoft。W3Cの姿と重なって見えるのは、筆者の気のせいでしょうか。