フロート(浮動体)は、現在の表示位置から左右いずれかに ずれたところに浮遊した形で存在するボックスである。フロートとなる要素 を避けた「流し込み」が可能となる。
ボックスを左右どちらに浮動させるか、あるいはさせないかを 決定する。指定できる値は以下のどれか。
該当要素を左に寄せられて浮動するボックスとする。
該当要素を右に寄せられて浮動するボックスとする。
該当要素を浮動しないボックスとする。
float特性値にrightを持つボックスの例を次に示す。枠内の 右に寄せられた小枠がそのボックスである。
このボックス内で、最初に右に浮遊する相対幅40%のフロートボックスを作成。
次にこのパラグラフ(p要素)を書き始める。このパラグラフは後から書いたも のだが、フロートボックスを避けながら進んで行き、フロートボックスの高さを 越えたところでまた本来の表示幅に戻る。高さに達しなくても本来の幅に戻る ときには clear 特性を利用する。
フロートボックスのマージンは隣り合うボックスのマージンによって 潰されない。言い換えると、隣り合うボックス側にマージンを設定しても 潰されるので、浮動するものの周囲のマージンをとりたいときはフロート ボックスとなる要素の側のスタイルで margin 特性を定義するのがよい。
設定されているフロートの下辺まですすみ、回り込みを解除するのが clear特性である。
先行するフロートボックスのどちらの辺への隣接を解消するか 決定する。指定できる値は以下のどれか。
左に寄せられたフロートとの隣接を避けるため、 そのフロートの下端まで進んだ位置を開始位置とする。
右に寄せられたフロートとの隣接を避けるため、 そのフロートの下端まで進んだ位置を開始位置とする。
それ以前の全てのフロート要素の下端まで進む。
制約はない。
次に、clear特性を利用した浮動処理解除の様子を示す。
【clearをleftにする例】
(1)右のフロート。
高さ=5em
(2)左のフロート
高さ=8em
(3)普通のパラグラフ。
(4)clearにleftを指定したパラグラフはここから始まる。
【clearをrightにする例】
(5)右のフロート。
高さ=5em
(6)左のフロート
高さ=8em
(7)普通のパラグラフ。
(8)clearにrightを指定したパラグラフはここから始まるが、
左のフロートの方が高いので、左フロートとの左右隣接関係は続く。
clearにbothを指定した場合は、左右高い方のフロートの終わる位置まで 進む。
yuuji@koeki-u.ac.jp