CSS - float

属性名	float
値	left \| right \| none \| <page-floats>
初期値	none
適用可能要素	すべての要素
継承	継承しない
メディア	Visual / Box
サポート	C1 / e4 / N4 / Fx1 / Ch1 / Op3.5 / Sa1

画像などの表示位置を指定します。img要素の align属性に相当します。left または right を指定すると、テキストがその周りを回り込むように表示されます。回り込みを解除するには clear を用います。

値	説明
left	左端に寄せ、右側にテキストを回りこませます。
right	右端に寄せ、左側にテキストを回りこませます。
none	回り込みを行いません。
<page-floats>	印刷時の配置を指定します。詳細未稿。

下記は、left で画像を左端に寄せ、右側にテキストを回りこませたサンプルです。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

HTML

<div style="width:500px; border:1px solid gray; margin:1em">
  <img src="../image/back.gif" alt="" style="height:60px; width:60px; float:left">
  <div>このテキストは左側で回りこんでいます。</div>
  <div>このテキストも左側で回りこんでいます。</div>
  <div style="clear:left">このテキストは左側の回りこみを解除しました。</div>
</div>

<div style="width:500px; border:1px solid gray; margin:1em">
  <img src="../image/back.gif" alt="" style="height:60px; width:60px; float:right">
  <div>このテキストは右側で回りこんでいます。</div>
  <div>このテキストも右側で回りこんでいます。</div>
  <div style="clear:right">このテキストは右側の回りこみを解除しました。</div>
</div>

<div style="width:500px; border:1px solid gray; margin:1em">
  <img src="../image/back.gif" alt="" style="height:60px; width:60px; float:left">
  <img src="../image/back.gif" alt="" style="height:60px; width:60px; float:right">
  <div>このテキストは両側で回りこんでいます。</div>
  <div>このテキストも両側で回りこんでいます。</div>
  <div style="clear:both">このテキストは両側の回りこみを解除しました。</div>
</div>

表示

このテキストは左側で回りこんでいます。

このテキストも左側で回りこんでいます。

このテキストは左側の回りこみを解除しました。

このテキストは右側で回りこんでいます。

このテキストも右側で回りこんでいます。

このテキストは右側の回りこみを解除しました。

このテキストは両側で回りこんでいます。

このテキストも両側で回りこんでいます。

このテキストは両側の回りこみを解除しました。

CSS - float

■ 概要

■ 説明

■ 使用例