Section 4 : 回り込み

 回り込みが指定された要素は右または左に配置され,テキストの流れから独立した“島”のようになる。逆に言うと,右または左に配置された回り込み要素をよけるようにテキストが流れていく。

回り込みの指定と解除

 float 属性によって,あらゆる要素に回り込みを指定することが可能である。継承はされない

float: (キーワード);

 キーワードとして指定できるのは以下のとおり。

none
その要素に回り込みは指定しない。初期値。
left
その要素を左に配置し,回り込みを行う。
right
left にときと逆に,その要素を右に配置し,回り込みを行う。
first-letter 疑似要素に回り込みを指定すると……
図 4.1 [D]

 周囲にほかの回り込み要素がない場合,回り込みを指定された要素はその外側のブロック要素の内側いっぱいに左または右に寄せられる。インライン要素に回り込みを指定すると,ブロック要素のように扱われる。回り込みは文章と図版を対照させるときに使われることが多い。また,first-letter 疑似要素に使って,図 4.1 のようにドロップ キャップを設定することもできる。

 一方,回り込みを解除するときは解除したい位置で

clear: (キーワード);

を指定する。キーワードは

none
いずれの回り込みも解除しない。初期値。
left
左側の回り込みを解除する。
right
右側の回り込みを解除する。
both
左右両方の回り込みを解除する。

 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>

回り込み

Studio HEXANE右の画像は回り込み要素です。文字の流れがその左端で折り返されます。

回り込みを解除しました。

 IE4/5  float 属性は <DIV><SPAN> と,<IMG> のような置換要素にしか適用されない。

 IE3  float 属性はサポートされていない。

 NN4  float 属性を指定すると表示が乱れることがある。

回り込み要素

 float 属性によって回り込みを指定された要素が回り込み要素だが,前述のようにインライン要素に指定した場合でも回り込み要素はブロック要素と同じ扱いになる。

 このとき,通常のブロック要素のときとは異なり,回り込み要素のマージンがほかのマージンと垂直に隣り合っていても圧縮は起こらない

 周囲にほかの回り込み要素がなければ回り込みを指定された要素はいっぱいに寄せられるのだが,周囲の状況によって配置が変わることがある。次に示すのが回り込み要素の配置のルールである。以下は,float 属性が left の場合である。

  1. 回り込み要素のボックスの左端は,そのレフトマージンが負でない限りその外側の要素の,内容の領域の左端を越えることはない。
  2. 回り込み要素のボックスは,それより以前に HTML 中に出てきた左への回り込み要素より右側にあるか,下側にある。
  3. 回り込み要素のボックスの右端はその右にある右への回り込み要素のボックス左端の右には出ない。
  4. 回り込み要素のボックスの上端は,そのトップマージンが負でない限りその外側の要素の,内容の領域の上端を越えることはない。
  5. 回り込み要素のボックスの上端は,そのトップマージンが負でない限りそれより前に書かれたブロックおよび回り込み要素の上端を越えることはない。
  6. 回り込み要素のボックスの上端は,そのトップマージンが負でない限りそれより HTML 中で前にある記述が作るラインボックスの上端を越えることはない。
  7. 回り込み要素の高さは,できるだけ高くとられる。
  8. 以上をふまえて,できるだけ上へ,そしてできるだけ左へ配置する。

 右への回り込み要素の場合は適宜読み替えていただきたい。結果的には,できるだけ上,そして右に配置される。

 通常は回り込み要素と他の要素が重なることはないが,マージンが負であったり回り込みを指定した要素が大きすぎるときは重なってしまう場合もあり得る。