右にフロートした画像と、流し込まれたテキスト

Aqua Effect

まず最初の状態を確認してください。
水色の背景に大見出しがあり、「右に寄せられた画像と、流し込まれたテキスト」と書かれています。
次にdivでグループ化されたピンクの背景の「通常フローにする」、「右フローとする」の2つのボタンがあります。
さらに次にはp要素で囲まれた「怪鳥」の画像があります。p要素はオレンジの背景色です。
その下にp要素に囲まれたこの説明文があります。

このように上から順番にブロック要素が並ぶ事を通常フローと呼びます。またブロック要素は親要素の幅いっぱいまで広がっているのが分かります。このサンプルではこの説明文があるp要素の親要素はdiv#wrapperとなります。もし、親要素が無い場合はbodyが親要素になります。

画像を右側に寄せて、文字が左側に回り込むようなレイアウトはどのようにすればいいでしょうか。まず、画像を囲む要素にフロートを設定します。今回は画像を右側に寄せるのですから画像を囲むp要素に対してfloat:rightを設定します。フロートの設定をする時はフロート対象の要素の幅(width)を決めます。決めなかった場合は内容領域の幅に依存します。ここでは幅を決めていませんので、自動でp要素の幅は画像の幅と同一になっています。 右フロートのボタンをクリックすると画像が右フロートします。フロートを設定すると画像は親要素の中で可能な限り右側に寄せられます。このときフロートをかけた要素は通常フローから浮いた状態になります。さらにp要素の幅が画像の幅と同一になろうとします。

そのため画像の下に位置していた通常フローのp要素はあたかも画像が無いかのように上に上がってしまいます。p要素の背景色で確認してください。

けれどもどこまでも上に上がる事はできません。上にある通常フローのものより上には上がれません。ここではdiv class="ctrl"要素(ピンク背景)で止められた状態になっているのです。

もうひとつ面白い現象はp要素の中のテキストだけは画像を避けるように流しこまれます。テキストが画像をさけて表示されている部分を赤色にしてみました。(見る環境で多少影響を受けるテキストの挙動が変わります)

ここで怪鳥の画像をクリックしてみてください。黄色の背景色がついた部分のp要素にクリアが設定されました。クリアを設定することで該当の要素がフロートの影響を受けないだけのクラランスマージンを作り画像の下に配置されます。通常フローと右フロートのボタンで何度でも動きが確認できますのでフロートの動きをしっかり理解するようにしましょう。