float／clear 回り込み

●float:(値)
・要素(画像や表など)を親要素領域内の左端／右端に配置。それに続く要素は逆側に回り込む。子要素に継承しない。
・(値)
　　left　･･･左に配置し、それに続く要素は右側に回り込みする
　　right　･･･右に配置し、それに続く要素は左側に回り込みする
　　none　･･･(初期値）回り込みしない

●clear:(値)
・float属性による回り込みを解除する
・(値）
　　left　･･･float:leftされた要素に対する回り込みを解除する
　　right　･･･float:rightされた要素に対する回り込みを解除する
　　both　･･･float属性で配置された右／左側両方の回り込みを解除する
　　none　･･･いずれの回り込みを解除しない（初期値）

Sample

画像を挿入しました。この画像には＜float:right＞が設定されています。
ご覧の通り，画像に続くテキストは左側に回りこんで表示されました。

2枚の画像を挿入しました。最初の画像には＜float:left＞を、次の画像には＜float:right＞が設定されています。
ご覧の通り，画像に続くテキストは真ん中に表示されました。

表です
floatスタイルは	right

表を挿入しました。
この表には＜float:right＞が設定されています。
ご覧の通り，表に続くテキストは左側に回りこんで表示されました。
･･･

表です
floatスタイルは	left

このように表と画像とテキストを並べて配置できる。

表には＜float:left＞
画像にも＜float:left＞を設定

この画像には＜float:feft＞を設定。その結果，画像と表を並べて配置できる

表です
floatスタイルは	無し

水平線にもfloatスタイルは効きます。
<hr style="float:left">

clearはfloat属性による回り込みを解除します

ここには＜style="clear:left"＞を指定しています

Scriptプロパティ＜styleFloat＞

上の水平線のfloat値を変更する

Sample Source......................................................................>>>

<hr id="suihei" style="width:200px;height:20px;background-color:#bdb76b;float:left">

<p>上の水平線のfloat値を変更する
　<button onclick="suihei.style.styleFloat='right'">right配置にする</button>
　<button onclick="suihei.style.styleFloat='left'">left配置にする</button>
　<button onclick="suihei.style.styleFloat='none'">回り込みしない(none)</button>
</p>