CSS - float

トップ > CSSリファレンス > float

概要

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

説明

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

説明
left左端に寄せ、右側にテキストを回りこませます。
right右端に寄せ、左側にテキストを回りこませます。
none回り込みを行いません。
inherit親要素の値を継承します。

下記は、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>
表示
このテキストは左側で回りこんでいます。
このテキストも左側で回りこんでいます。
このテキストは左側の回りこみを解除しました。
このテキストは右側で回りこんでいます。
このテキストも右側で回りこんでいます。
このテキストは右側の回りこみを解除しました。
このテキストは両側で回りこんでいます。
このテキストも両側で回りこんでいます。
このテキストは両側の回りこみを解除しました。

関連項目

float, clear

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年10月25日
http://www.tohoho-web.com/css/prop/float.htm