float属性値にnoneが指定された要素は、デフォルトの位置に配置される。この場合、テキストは回りこみを行わない。
スタイルシート属性 float は、配置位置を指定します。テキストの回りこみを解除するには、スタイルシート属性 clear を使用します。
float: value| 値 | 意味 |
|---|---|
| none | 通常（規定値） |
| right | 右端（テキストは左側に回りこむ） |
| left | 左端（テキストは右側に回りこむ） |
| inherit | 継承 |
<div style="width: 200px; border: 1px solid">
<img src="image.png" style="float: none">
<p>
float属性値にnoneが指定された要素は、デフォルトの位置に配置される。
この場合、テキストは回りこみを行わない。
</p>
</div>float属性値にnoneが指定された要素は、デフォルトの位置に配置される。この場合、テキストは回りこみを行わない。
スタイルにfloat:rightを指定すると右に配置され、後続の要素が左に回り込んで表示される。
<div style="width: 200px; border: 1px solid">
<img src="image.png" style="float: right">
<p>float属性値にrightが指定された要素は、右端に配置される。この場合、テキストは左側に回りこむ。</p>
</div>float属性値にrightが指定された要素は、右端に配置される。この場合、テキストは左側に回りこむ。
スタイルにfloat:leftを指定すると左に配置され、後続の要素が右に回り込んで表示される。
<div style="width: 200px; border: 1px solid">
<img src="image.png" style="float:left">
<p>float属性値にleftが指定された要素は、左端に配置される。この場合、テキストは右側に回りこむ。</p>
</div>float属性値にleftが指定された要素は、左端に配置される。この場合、テキストは右側に回りこむ。
div要素はブロック要素であるから回り込みは行わないが、スタイルにfloat: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表示例を次に示す。
スタイルシート属性 clear は、テキストの回り込みを解除します。テキストの回り込みを行うには、スタイルシート属性 float を使用します。
clear: value| 値 | 意味 |
|---|---|
| none | 解除しない |
| right | テキストの右側回り込みを解除 |
| left | テキストの左側回り込みを解除 |
| both | テキストの左右回り込みを解除 |
スタイルシートにclear:leftを指定すると、直前の要素にfloat: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表示例を次に示す。
div4のスタイルにfloat:leftが指定されているので、次の要素は右に回り込むはずだが、div5のスタイルにclear:leftを指定してるので、回り込みは行わない。
World Wide Web Consortium (2021) CSS Logical Properties and Values Level 1