boxのフロート float clear/css

boxのフロート

ボックスのフロート（浮動化）を指定する(CSS)

float: left;

　float は、全てのタグ（要素）に適用できます（positionプロパティで「absolute」または「fixed」が指定された要素を除く）。

　float は、フロート（浮動化）を指定するプロパティです。このプロパティを指定するとボックスを左か右に寄せて、テキストなどを逆側に回り込ませることができます。

　div { width: 300px; float: left; }

プロパティ名	値	説　　明
float	none	フロートさせない（初期値）
	left	ボックスを左に配置し、テキストなどを右側に回り込ませる
	right	ボックスを右に配置し、テキストなどを左側に回り込ませる

＊フロートを指定する場合は、「回り込みを解除する」もご覧下さい。

　【Internet Exp.の不具合について】

　Internet Exp.6 以前では、次の不具合が発生する場合があります。（Internet Exp.7 では、この不具合は解消されています）

＊背景色（または背景画像）が設定された要素内でフロートを指定すると、回り込んだテキストの一部が消えたり、背景の一部が反映されなかったり、といった不具合が発生する場合があります。
　→ 親要素に対して幅（width）を指定しておくと、この不具合を回避できます。

＊フロートを指定した方向にマージンを設定すると、そのマージンの大きさが２倍になってしまいます。　例えば float: left を指定したボックスに margin-left: 30px を指定すると、そのマージンが 60px になってしまう。

フロートを指定するタグ（要素）には、widthプロパティで幅を指定しておく必要があります。

　★ 使用例とブラウザでの表示 (b5-1)スタイルシートの書き方（基本）は、こちらです。


設定例： .b5-1a div { width: 160px; height: 40px; margin-bottom: 2px; text-align: center; backGround-color: lightblue; } .b5-1b div { width: 100px; height: 80px; margin-right: 5px; text-align: center; backGround-color: thistle; } .b5-1left { float: left; } .b5-1right { float: right; }

使　用　例		ブラウザの表示

<DIV class=b5-1a><div class=b5-1left> ボックスを左に配置</div></DIV> ボックスの右側に文字を回り込ませます。		ボックスを左に配置ボックスの右側に文字を回り込ませます。

<DIV class=b5-1a><div class=b5-1right> ボックスを右に配置</div></DIV> ボックスの左側に文字を表示させます。		ボックスを右に配置ボックスの左側に文字を表示させます。

<DIV class=b5-1b><div class=b5-1left> 横並び<br>ボックス１</div></DIV> <DIV class=b5-1b><div class=b5-1left> 横並び<br>ボックス２</div></DIV> <DIV class=b5-1b><div class=b5-1left> 横並び<br>ボックス３</div></DIV>		横並びボックス１横並びボックス２横並びボックス３

回り込みを解除する

文字の回り込みを解除する(CSS)

clear: both;

　clear は、ブロックレベルのタグ（要素）に適用できます。

　clear は、テキストなどの回り込みを解除するプロパティです。このプロパティは、floatプロパティによる回り込みを解除する場合に使用します。

　div { clear: left; }

clearプロパティは、ブロックレベルの要素に対して指定します。<br>タグに指定した場合でも回り込みを解除できますが、<br>タグはインライン要素のため、文法的には誤った使い方となります。

　★ 使用例とブラウザでの表示 (b5-2)スタイルシートの書き方（基本）は、こちらです。


設定例： div.b5-2 { width: 150px; height: 60px; backGround-color: powderblue; float: left; } .b5-2clear { clear: left; }

使　用　例		ブラウザの表示

<div class=b5-2>ボックスを左に配置</div> 文字を右に回り込ませます。 <div class=b5-2clear>回り込みを解除しました。</div>		ボックスを左に配置文字を右に回り込ませます。回り込みを解除しました。