floatプロパティ。

CSSに於ける要素の右か左へのフローティング指定・floatプロパティに関する解説です。

floatプロパティとは。

floatプロパティは、要素の右か左へのフローティング指定です。

フローティングとは、通常上から下に配置されるべきボックスを右か左に寄せて配置する事です。

フロートされたボックスに続くコンテンツは、その反対側に廻り込むように流し込まれます。

clearプロパティで廻り込みを解除する事も出来ます。

フローティングの対象となるボックスには明確な横幅が必要となります。

置換要素であれば、明らかな横幅が存在しますが、非置換要素であってもwidthプロパティで横幅を指定する必要があります。

オペラ 6.x以外では、widthプロパティの無い非置換要素であっても幅を適切に設定してくれますが、仕様には横幅が指定されていない非置換要素をフロートする場合、幅は零と見なされます。(平成18年 8月 2日訂正)
尚、現在策定中のCSS第二水準第一改訂版(CSS 2.1)では現在のユーザエージェントの実装を追認して、空いている横幅に出来得る限り当該要素が収まるように幅を定める事とする予定です。(平成18年 8月 2日追記)

floatプロパティを与えられたボックスの配置。

フローティングには仕様で明確な決まりがありますが、特に重要と思われるものを挙げておきます(以下左フロートの場合ですが、右フロートの場合も左右が入れ替わるだけで同様です)。

フローティングされたボックスの上下の余白(マージン)は、他のボックスの上下の余白(マージン)との相殺は行われません。(平成18年 6月28日追記)
左フローティングでは、親要素の左端をはみ出すようにボックスを配置してはいけません。
- 左の余白(マージン)の左端をはみ出さないようにします。従って、左の余白(マージン)が正の値を与えられていれば、その分左側が空く事になります。(平成18年 6月28日追記)
左フロートされたボックスが複数ある場合、後方のボックスは先にフロートされたボックスの右に並べるか、下に並べなければなりません。
左フロートされたボックスの右端は、同じ高さにある右フロートされたボックスの左端より右にあってはいけません。すなわち、左フロートされたボックスは右フロートされたボックスに重なってはいけません。
- - 左フロートされたボックスの右の余白(マージン)の右端と
  - 右フロートされたボックスの左の余白(マージン)の左端が
  重なってはいけないと言う事です。
  
  また、左右のマージンは相殺されない事にも注意して下さい。
左フロートされたボックスが複数ある場合、後方のボックスは先にフロートされたボックスの右に並べる事で親要素の右端をはみ出してはいけません。
複数のボックスを左フロートする場合、なるべく先にフロートされたボックスに並べるようにします。それが出来ない場合でもなるべく上の方に配置するようにします。