関連プロパティ

• clear
• position
• display
• text-align
• width

float

ボックスを右か左にフロートさせます。フロートとはつまり、「寄せる」事です。HTMLの img要素のalign属性 に似ています。

中身のテキストだけ位置ぞろえをするなら、'text-align'を使うと良いです。

生成内容、ルート要素には使えません。

左フロートの下に、更に左フロートがある場合は、その左フロートを手前の左フロートの右に置きます。フロート同士は、インライン要素と違って、上外辺をそろえます。左フロートの右に置けない場合は、次はその下の行の一番左に寄せます。右フロートも同じです。ただし、左右逆ですが。

現状（2003/08/07時点）では、上記詳細にきちんと対応したUAは知る限り存在しません。仮に存在したとしても、ほかのUAでの調整が大変ですので、飽くまで単に「寄せるだけ」の目的で使用されることをお勧めします。

このプロパティが[none]以外のキーワードを採る場合、その要素の'display'は強制的に[block]にされます。これを考えると、インライン要素内にフロートが登場すると、ほかの部分は2つの匿名ブロックボックスになるはずですが、実際にはほかの部分は普通にインライン要素として考えるようです。フロートしいてるボックスは特殊なボックスと考えるほうが良いです。フロートしたボックスは、そのボックスがインラインの時に存在するべき行の左又は右に寄せられ、その行の上端にそろえます。

また、指定した要素に内在寸法が無い場合は、'width'で幅を指定する必要があります。それも無い場合は、幅ゼロとして無視されてしまうので、注意が必要です。

テキストをフロートする場合は、'width'必須！

'display'と'position'と'float'は、機能的にはぶつかり合います。3者のやり取りについては、'display'と'position'と'float'の関係をご覧ください。

インラインボックスがフロートと重なる場合、そのインラインボックスの内容、背景、ボーダーはフロートの前に表示されます。また、ブロックボックスがフロートと重なる場合、そのブロックボックスの背景、ボーダーはフロートの後ろに隠されて、フロートが透明になっている箇所のみから透けて見えます。

つまり、インライン要素を重ねると(フロートの右のマージンに負の値を指定します)、

とこんなふうになって、ブロック要素を重ねると、

となります。

回り込みを禁止するには、'clear'を使います。

それと、コンテナブロックからはみ出してはいけないそうです。

フロートを使用する場合は、念の為に、大きめの区切りには適宜'clear'を指定しておきましょう。

注意点

1. 要素に内在寸法が無い場合は、'width'で幅を指定する必要があります。

CSS1とCSS2の相違点

1. フロート要素とインライン要素、ブロック要素と重なった時の処理方法が定められました。