float の性質

floatプロパティは、要素を浮遊させて、通常の流れから取り除き、左か右に寄せます。float した要素はブロックボックス（block box）となり、新たな流れを作り出します。

通常フロー（normal flow）には、ブロックボックスが属する流れ（block formatting context）とインラインボックスが属する流れ（inline formatting context）の２つがあります。ブロックボックスが属する流れでは、ボックスは包含ブロックの上から下へとレイアウトされていきます。インラインボックスが属する流れでは、水平に（横に）レイアウトされていきます。 [ Normal flow CSS2.2 ]

※ ブロックレベル要素はブロックボックスを、インラインレベル要素はインラインボックスを生成します。 [ Block-level elements and block boxes CSS2.1 / Inline-level elements and inline boxes CSS2.1 ]

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

clear:left; を使ってクリア。

上のイラストは float: left; で左寄せにしています。後に続くテキストは右側に表示され、イラストの高さを超えるとイラストの下にも流れ込んでいきます。

HTML source

<div style="margin:0 auto; width: 400px; padding: 5px;">
 <img src="**.gif" width="" height="" style="float: left; margin-right: 10px;">
 <p>テキスト テキスト テキストテキスト テキスト テキスト …</p>
 <p style="clear: left;">clear: left; を使ってクリア。</p>
</div>

包含ブロック、ブロックボックス、行ボックス

黒の線はcontaining block（包含ブロック）、ピンクの線は block box（ブロックボックス）です。水色は、それぞれ１行が１つの line box (行ボックス)です。行ボックスは、インラインボックスを含む一行の四角形の領域のことです。 [ Block-level formatting CSS3 ]

ピンクの線の block box（ブロックボックス）が画像の下まで流れ込んできています。行ボックスは、floatした要素がありますので、その分だけ幅を縮めて表示されています。 [ Inline formatting contexts CSS2.1 ]

※ div や p などのブロックレベル要素は、デフォルトで display: block; が指定されています。display: block; を指定した要素は block box（ブロックボックス）として表示します。 [ HTML Standard / Appendix D. Default style sheet for HTML 4 CSS2.1 ]

※ 包含ブロックは、 padding辺（Box dimensions CSS2.1）から内側になります。この例では borderは 0 なので padding辺と重なっています。 [ 包含ブロックの定義 Definition of "containing block" CSS2.1 ]

同じように、floatプロパティを使ってボックスを配置してみます。float したボックスは横幅を指定した方が良いので、Aボックスに横幅 width を指定します。上の画像は、<img> タグに width を指定してあります。 [ CSS2 / CSS2.1では特に記載無し ]

Aボックスに float: left; を指定

float されたAボックスはまったく無視された状態になり、続くBボックスがAボックスに流れ込んできています。（画像をクリックするとサンプルページが見れます。）

Bボックスにも float: right; を指定

AボックスとBボックスの両方を float させてみますと、Bボックスが流れ込むのは無くなりました。floatの配置には、float したボックス同士は重ならないというルールがあります。 [ Positioning the float: the 'float' property CSS2.1 ]（画像をクリックするとサンプルページが見れます。）

clear: both; を指定

そして、clear: both; を指定して、次のボックスが浮動ボックスの下にくるようにします。（画像をクリックするとサンプルページが見れます。） CSS仕様書では、”解除”とは書いてないんですね。→[ Controlling flow next to floats: the 'clear' property CSS2.1 ]

float：親ボックスの背景色が表示されない件についてへ続きます。