float

スタイルシート属性 float は、配置位置を指定します。テキストの回りこみを解除するには、スタイルシート属性 clear を使用します。

書式

float: value

属性値

value
配置位置を次の値の中から指定します。
意味
none通常(規定値)
right右端(テキストは左側に回りこむ)
left左端(テキストは右側に回りこむ)
inherit継承

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例と表示サンプル

<div style="width: 200px; border: 1px solid">
<img src="image.png" style="float: none">
<p>floatは配置位置を指定するスタイルシート属性である。float属性値にnoneが指定された要素は、デフォルトの位置に配置される。この場合、テキストは回りこみを行わない。</p>
</div>

floatは配置位置を指定するスタイルシート属性である。float属性値にnoneが指定された要素は、デフォルトの位置に配置される。この場合、テキストは回りこみを行わない。

スタイルにfloat:rightを指定すると右に配置され、後続の要素が左に回り込んで表示される。

<div style="width: 200px; border: 1px solid">
<img src="image.png" style="float: right">
<p>floatは配置位置を指定するスタイルシート属性である。float属性値にrightが指定された要素は、右端に配置される。この場合、テキストは左側に回りこむ。</p>
</div>

floatは配置位置を指定するスタイルシート属性である。float属性値にrightが指定された要素は、右端に配置される。この場合、テキストは左側に回りこむ。

スタイルにfloat:leftを指定すると左に配置され、後続の要素が右に回り込んで表示される。

<div style="width: 200px; border: 1px solid">
<img src="image.png" style="float:left">
<p>floatは配置位置を指定するスタイルシート属性である。float属性値にleftが指定された要素は、左端に配置される。この場合、テキストは右側に回りこむ。</p>
</div>

floatは配置位置を指定するスタイルシート属性である。float属性値にleftが指定された要素は、左端に配置される。この場合、テキストは右側に回りこむ。

div要素はブロック要素であるから回り込みは行わないが、スタイルにfolat:leftを指定することにより回り込みを行うようになる。

<div style="border:1px solid">div1</div>
<div style="border:1px solid">div2</div>
<div style="border:1px solid;float:left">div3</div>
<div style="border:1px solid">div4</div>
<div style="border:1px solid">div5</div>

上記のHTML表示例を次に示す。

div1
div2
div3
div4
div5

clear

スタイルシート属性 clear は、テキストの回り込みを解除します。テキストの回り込みを行うには、スタイルシート属性 float を使用します。

書式

clear: value

属性値

value
テキストの回り込み解除を指定します。
意味
none解除しない
rightテキストの右側回り込みを解除
leftテキストの左側回り込みを解除
bothテキストの左右回り込みを解除

スタイルシートにclear:leftを指定すると、直前の要素にfolat:leftが指定されていても、回り込みを行わないようになる。

<div style="border:1px solid;float:left">div1</div>
<div style="border:1px solid">div2</div>
<div style="border:1px solid">div3</div>
<div style="border:1px solid;float:left">div4</div>
<div style="border:1px solid;clear:left">div5</div>
<div style="border:1px solid">div6</div>

上記のHTML表示例を次に示す。

div1
div2
div3
div4
div5
div6

div4のスタイルにfloat:leftが指定されているので、次の要素は右に回り込むはずだが、div5のスタイルにclear:leftを指定してるので、回り込みは行わない。