|
写真: |
左は、次のようになにも指定しない例です。
<p style="background-color: yellow;"> 写真:<img src="gazou.jpg"> これは、<br>お祝いの<br>花束<br>です</p> |
float属性は、image, tableタグなどに対して、
右や左よせするために使われます。
(floatプロパティは、positionプロパティで static以外の値が指定されている要素には適用されません)
寄せたことによって、逆側の空いた部分へ、
後述の要素が流れ込むように回り込みます。
（回り込みが可能となる空間が足りない場合は、回り込みしません）
なお、回り込みを途中で止めたい場合があります。その場合は、
brタグのclear属性を指定します。(空の領域作る必要があります。)
例えば、<float: left;>による周り込みには、
<br clear="left">を指定し、
<float: right;>による周り込みには、
<br clear="right">を指定し、
両方の回り込みに対しては<br clear="both">を指定します。
以下で、画像に対して使った例を示します。
|
写真: |
左は、次のようになにも指定しない例です。
<p style="background-color: yellow;"> 写真:<img src="gazou.jpg"> これは、<br>お祝いの<br>花束<br>です</p> |
|
写真: |
左は、画像を左寄せに指定した例です。
<p style="background-color: yellow;"> 写真:<img src="gazou.jpg" style="float: left;"> これは、<br>お祝いの<br>花束です</p> 空いた右側に、残りの要素が周り込みます。 |
|
写真: |
左は、画像を左寄せに指定した例です。
<p style="background-color: yellow;"> 写真:<img src="gazou.jpg" style="float: left;"> これは、<br>お祝いの<br>花束<br clear="left">です</p> 空いた右側に、残りの要素が周り込みます。 ただし、右に回りこむのは、<br clear="left"> または<br clear="both">が現れるまでです。 |
|
写真: |
左は、画像を右寄せに指定した例です。
<p style="background-color: yellow;"> 写真:<img src="gazou.jpg" style="float: right;"> これは、<br>お祝いの<br>花束です</p> 空いた左側に、残りの要素が周り込みます。 |
|
写真: |
左は、画像を右寄せに指定した例です。
<p style="background-color: yellow;"> 写真:<img src="gazou.jpg" style="float: right;"> これは、<br>お祝いの<br>花束<br clear="right">です</p> 空いた左側に、残りの要素が周り込みます。 ただし、左に回りこむのは、<br clear="right"> または<br clear="both">が現れるまでです。 |
これは、