CSS - float

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

概要

属性名 float
none | left | right | top | bottom | block-start | block-end | inline-start | inline-end | snap-block | snap-inline
初期値none
適用可能要素すべての要素
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS14113.51

説明

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

説明
none回り込みを行いません。
left左端に寄せ、右側にテキストを回りこませます。
right右端に寄せ、左側にテキストを回りこませます。
top包含するブロックの directionwriting-mode の値により、block-start または inline-start と同様にふるまいます。(CSS3)
bottom包含するブロックの directionwriting-mode の値により、block-end または inline-end と同様にふるまいます。(CSS3)
block-start未稿
block-end未稿
inline-start未稿
inline-end未稿
snap-block未稿
snap-inline未稿

使用例

HTML
<div style="width:500px; border:1px solid gray; margin:1em">
  通常の画像とテキストの関係はこの様になります。
  <img src="../image/back.gif" alt="" style="height:60px; width:60px;">
  画像もテキストの一部として、ベースラインを揃えて表示されます。
</div>

<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-2016 杜甫々
初版:1997年7月27日、最終更新:2016年5月8日
http://www.tohoho-web.com/css/prop/float.htm