float プロパティは，指定された要素を通常のテキストなどの流れから取り除き，左または右に寄せる。一般に，それより後に書かれた通常のテキストなどの流れは，このプロパティによって寄せられたボックスをよけるように流し込まれる。

float: キーワード;

　このプロパティは，

• position プロパティに static 以外を指定した要素，CSS によって生成された内容以外のすべての要素に適用される。
• 初期値は，キーワード none。
• プロパティの値は，継承されない。

　キーワードは，次のうちから 1 つを与える。

left

その要素のボックスを左に寄せ，その要素に後続する内容は右側に流し込まれる。その要素に対してボックスの種類を指定する display プロパティ（後述）が none でない限り，その要素のボックスはブロックボックスになる。

right

その要素のボックスを右に寄せ，その要素に後続する内容は左側に流し込まれる。ほかは left を指定したときと同様。

none

回り込み指定は行わない。

　ここで注意するべきは，“回り込みを指定した要素はブロックボックスを描く”ということである。すなわち，インラインボックスを生成する要素に回り込みを指定すると，背景の適用のされ方などが異なってくる。

　簡単な例として，画像を右に寄せてみよう。

IMG.fig { float: right; }
P { line-height: 1.5; }

<P><IMG CLASS="fig" SRC="f_ethnet.gif" WIDTH="149" HEIGHT="83" ALT="イーサネットのデザイン。">10BASE-T や 100BASE-TX に見慣れている人にはなじみがないかもしれないが，イーサネットはもともと 1 本のバスとなる同軸ケーブルにコンピュータを接続してく形式であった。バス線の両端は抵抗で終端され，コンピュータを接続するときは同軸ケーブルに穴をあける，または接続用の金具を用いて支線を取り付けていた。</P>

　ブラウザのウィンドウ幅を変更し，回り込みを指定された要素に後続するテキストがどのように流し込まれるか見てみよう。

　さて，回り込みを指定できるのは画像だけではない。ただし，画像の場合とは異なり，多少考慮する点がある。画像は置換要素で，固有の寸法を持っている。置換要素が回り込み指定されたとき，（何も指定しなければ）そのボックスの幅はその“固有の寸法”になるので一般に回り込み配置されたボックスの幅を考える必要はない。しかし，置換要素以外を回り込み配置させる場合，それは固有の寸法を持っていない。このとき，width プロパティが auto ならば（width プロパティは継承されず，初期値は auto だから，何も指定しなければ auto と同じになる），ボックスの幅は 0 にされてしまう（これでは出力がおかしくなる）。したがって，置換要素以外に対して回り込み指定を行うときは，一般に同時にボックスの幅を明示的に指定しておく必要がある。

　このことを念頭において，非置換要素に回り込みを指定する例を見てみよう。

H3 { float: left; width: 15%; background-color: #66C; padding: 0.2em; text-align: center; }
P { line-height: 1.5; margin: 0; }

<H3>NetBEUI</H3>
<P>NetBEUI は，Microsoft ネットワークのネイティブ プロトコルである。小規模な LAN 向けで，複雑なルーティングは実装していない。NetBIOS の API 規格を実装したものである。</P>
<H3>AppleTalk</H3>
<P>一方，AppleTalk は，アップル コンピュータのネットワーク アーキテクチャおよびネットワーク プロトコルのことである。</P>

　これについても，ブラウザのウィンドウ幅を変更して見てみよう。

　回り込み指定に関しては，その要素がどこに配置されるのかというのが問題になるが，原則として，float: left; に対しては，それを指定した要素より前に書かれた要素を超えない範囲でできるだけ上に配置され，それから左に寄せられる。float: right; の場合も同様だが左右を逆に読み替える。

　これについての詳細は後述することにしよう。

　回り込みを指定すると，後続する要素の内容はその要素の側方に流し込まれるが，それを解除するのが clear プロパティである。

clear: キーワード;

　このプロパティは，

• （回り込み指定された要素を含めた）ブロックボックスを生成する要素に適用される。
• 初期値は，キーワード none。
• プロパティの値は，継承されない。

　キーワードは，次のうちから 1 つを指定する。

left

左方の回り込み要素に対する，側方流し込みを解除する。

right

右方の回り込み要素に対する，側方流し込みを解除する。

both

左方および右方の回り込み要素に対する，側方流し込みを同時に解除する。

none

回り込みの解除は行わない。

　clear プロパティに none 以外の値が指定されると，そのボックスの枠の上端が，left の時は左方にある回り込みを指定された要素の下端にくるように，トップマージンが広げられる（right および both の場合も同様）。簡単に言えば，回り込みの解除を指定された要素のボックスは，回り込み指定された要素の下端まで押し下げられる。

　clear プロパティの簡単な例をご覧に入れよう。

IMG.fig { float: right; }
P { line-height: 1.5; }
H3 { clear: right; background: #69C; }

<H3>イーサネット</H3>
<P><IMG CLASS="fig" SRC="f_ethnet.gif" WIDTH="149" HEIGHT="83" ALT="イーサネットのデザイン。">10BASE-T や 100BASE-TX に見慣れている人にはなじみがないかもしれないが，イーサネットはもともと 1 本のバスとなる同軸ケーブルにコンピュータを接続してく形式であった。</P>
<H3>FDDI</H3>
<P>FDDI はトークンと呼ばれる「送信権」をリングの中を巡回させながらファイバを通じて通信を行う方式である。</P>