CSSで、右か左へのフローティングを指定するfloatプロパティに関する解説です。
floatプロパティは、右か左へのフローティングを指定するプロパティです。
フローティングとは、通常上から下に配置されるべきボックスを右か左に寄せて配置する事です。
フロートされたボックスに続くコンテンツは、その反対側に廻り込むように流し込まれます。
フローティングの対象となるボックスには明確な横幅が必要となります。
置換要素であれば、明らかな横幅が存在しますが、非置換要素であってもwidthプロパティで横幅を指定する必要があります。
フローティングには仕様で明確な決まりがありますが、特に重要と思われるものを挙げておきます(以下左フロートの場合ですが、右フロートの場合も左右が入れ替わるだけで同様です)。
左フローティングでは、親要素の左端をはみ出すようにボックスを配置してはいけません。
左フロートされたボックスの右端は、同じ高さにある右フロートされたボックスの左端より右にあってはいけません。すなわち、左フロートされたボックスは右フロートされたボックスに重なってはいけません。
重なってはいけないと言う事です。
また、左右のマージンは相殺されない事にも注意して下さい。
つまり、複数ボックスの左フロートでは、左から順にフロートして行って入り切らなくなったら折り返すが、その際にはなるべく高い位置に置かれると覚えておけば良いでしょう。
floatプロパティの書式は、以下のようになります。
float: 値値としては、以下のものが取れます。
inheritnonerightleft例えば、画像(<img>要素)を左にフロートしたい場合は、
img {float: left;}
と記述します。
ネットスケープ 4.xではfloatプロパティと以下のプロパティの組合せで表示が崩れます。
オペラ 6.xでは、非置換要素をフロートする場合にはwidthプロパティで横幅を指定しないと、100％の横幅のボックスをフロートしてしまう場合があります。
この場合、横スクロールが発生する事になるでしょう。
WAP 2.0では、floatプロパティは必須ですが、オープンウェーヴ社のWAP 2.0 ウェブブラウザには実装されておりません。
