回り込みが指定された要素は右または左に配置され,テキストの流れから独立した“島”のようになる。逆に言うと,右または左に配置された回り込み要素をよけるようにテキストが流れていく。
float 属性によって,あらゆる要素に回り込みを指定することが可能である。継承はされない。
float: (キーワード);
キーワードとして指定できるのは以下のとおり。
周囲にほかの回り込み要素がない場合,回り込みを指定された要素はその外側のブロック要素の内側いっぱいに左または右に寄せられる。インライン要素に回り込みを指定すると,ブロック要素のように扱われる。回り込みは文章と図版を対照させるときに使われることが多い。また,first-letter 疑似要素に使って,図 4.1 のようにドロップ キャップを設定することもできる。
一方,回り込みを解除するときは解除したい位置で
clear: (キーワード);
を指定する。キーワードは
clear 属性を none 以外に指定した時点でその位置の左(left のとき),右(right のとき),あるいは両方(both のとき)に回り込み要素があった場合には,その回り込み要素下端の直下の垂直位置からテキストの流れが再び始まる。
<H3>回り込み</H3>
<P><IMG SRC="sthexane.gif" ALT="Studio HEXANE" WIDTH="156" HEIGHT="32" STYLE="float: right;">右の画像は回り込み要素です。文字の流れがその左端で折り返されます。</P>
<P STYLE="clear: right;">回り込みを解除しました。</P>
右の画像は回り込み要素です。文字の流れがその左端で折り返されます。
回り込みを解除しました。
IE4/5 float 属性は <DIV>,<SPAN> と,<IMG> のような置換要素にしか適用されない。
IE3 float 属性はサポートされていない。
NN4 float 属性を指定すると表示が乱れることがある。
float 属性によって回り込みを指定された要素が回り込み要素だが,前述のようにインライン要素に指定した場合でも回り込み要素はブロック要素と同じ扱いになる。
このとき,通常のブロック要素のときとは異なり,回り込み要素のマージンがほかのマージンと垂直に隣り合っていても圧縮は起こらない。
周囲にほかの回り込み要素がなければ回り込みを指定された要素はいっぱいに寄せられるのだが,周囲の状況によって配置が変わることがある。次に示すのが回り込み要素の配置のルールである。以下は,float 属性が left の場合である。
右への回り込み要素の場合は適宜読み替えていただきたい。結果的には,できるだけ上,そして右に配置される。
通常は回り込み要素と他の要素が重なることはないが,マージンが負であったり回り込みを指定した要素が大きすぎるときは重なってしまう場合もあり得る。