HTML講座

浮動化・回り込み

通常フロー

初期状態ではボックスは上からどんどん「積み重ね」られて行く。

通常フロー
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>

浮動化

浮動化

「い」を浮動化(float)させてみる。
「い」float:left
<div>あ</div>
<div style="float:left;">い</div>
<div>う</div>
<div>え</div>
<div>お</div>
「い」float:right
<div>あ</div>
<div style="float:right;">い</div>
<div>う</div>
<div>え</div>
<div>お</div>

「い」が通常フローから外れ、右ないし左に位置し、それ以外のボックスは(「い」に重なって)通常フローに従って配置される。ただしボックス内の文字は「い」を避ける。

※float設定していないボックスは回り込まないで浮動化したボックスの下に重なるが、その中の文字は浮動化したボックスと重ならないで回り込む。

「い」「う」を浮動化(float)させる。
「い」「う」float:left
<div>あ</div>
<div style="float:left;">い</div>
<div style="float:left;">う</div>
<div>え</div>
<div>お</div>
「い」「う」float:right
<div>あ</div>
<div style="float:right;">い</div>
<div style="float:right;">う</div>
<div>え</div>
<div>お</div>
「い」float:left 「う」float:right
<div>あ</div>
<div style="float:left;">い</div>
<div style="float:right;">う</div>
<div>え</div>
<div>お</div>

「う」は「い」を避けて右ないし左に配置される。「え」「お」の文字はボックス「い」「う」を避ける。

浮動化解除

「お」で「い」の浮動化を解除する。

「い」「う」float:left
「お」clear:left
<div>あ</div>
<div style="float:left;">い</div>
<div style="float:left;">う</div>
<div>え</div>
<div style="clear:left;">お</div>
「い」「う」float:right
「お」clear:right
<div>あ</div>
<div style="float:right;">い</div>
<div style="float:right;">う</div>
<div>え</div>
<div style="clear:right;">お</div>
「い」float:left 「う」float:right
「お」clear:left
<div>あ</div>
<div style="float:left;">い</div>
<div style="float:right;">う</div>
<div>え</div>
<div style="clear:left;">お</div>
「い」float:left 「う」float:right
「お」clear:right
<div>あ</div>
<div style="float:left;">い</div>
<div style="float:right;">う</div>
<div>え</div>
<div style="clear:right;">お</div>
「い」float:left 「う」float:right
「お」clear:both
<div>あ</div>
<div style="float:left;">い</div>
<div style="float:right;">う</div>
<div>え</div>
<div style="clear:both;">お</div>

「お」以降は「い」「う」も通常フロー上にあるものと認識される。

「え」の文字は(前回同様)「い」「う」を避けて配置。「お」の文字は(それに構わず)ボックス「お」の中に「通常通り」配置。