CSS - float

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

概要

属性名 float
none | left | right
初期値none
適用可能要素すべての要素
継承継承しない
メディアvisual
アニメーション不可
サポートhttps://caniuse.com/mdn-css_properties_float

説明

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

説明
none回り込みを行いません。
left左端に寄せ、右側にテキストを回りこませます。
right右端に寄せ、左側にテキストを回りこませます。

使用例

CSS
.float-left { float: left; }
.float-right { float: right; }
.clear-left { clear: left; }
.clear-right { clear: right; }
.clear-both { clear: both; }
HTML
<div style="width:500px; border:1px solid gray; margin:1em">
  通常の画像とテキストの関係はこの様になります。
  <img src="../../image/yuki5.gif" alt="">
  画像もテキストの一部として、ベースラインを揃えて表示されます。
</div>
<div style="width:500px; border:1px solid gray; margin:1em">
  <img src="../../image/yuki5.gif" alt="" class="float-left">
  <div>このテキストは左側で回りこんでいます。</div>
  <div>このテキストも左側で回りこんでいます。</div>
  <div class="clear-left">このテキストは左側の回りこみを解除しました。</div>
</div>
<div style="width:500px; border:1px solid gray; margin:1em">
  <img src="../../image/yuki5.gif" alt="" class="float-right">
  <div>このテキストは右側で回りこんでいます。</div>
  <div>このテキストも右側で回りこんでいます。</div>
  <div class="clear-right">このテキストは右側の回りこみを解除しました。</div>
</div>
<div style="width:500px; border:1px solid gray; margin:1em">
  <img src="../../image/yuki5.gif" alt="" class="float-left">
  <img src="../../image/yuki5.gif" alt="" class="float-right">
  <div>このテキストは両側で回りこんでいます。</div>
  <div>このテキストも両側で回りこんでいます。</div>
  <div class="clear-both">このテキストは両側の回りこみを解除しました。</div>
</div>
表示
通常の画像とテキストの関係はこの様になります。 画像もテキストの一部として、ベースラインを揃えて表示されます。
このテキストは左側で回りこんでいます。
このテキストも左側で回りこんでいます。
このテキストは左側の回りこみを解除しました。
このテキストは右側で回りこんでいます。
このテキストも右側で回りこんでいます。
このテキストは右側の回りこみを解除しました。
このテキストは両側で回りこんでいます。
このテキストも両側で回りこんでいます。
このテキストは両側の回りこみを解除しました。

回り込みの解除

テキストの回り込みを解除するには clear を用いますが、回り込みを解除する次の要素に対して clear:both を指定しなくてはならないというのは好ましくありません。

HTML
<div>
  <img src="../../image/yuki5.gif" alt="" class="float-left">
  <div>このテキストは左側で回りこんでいます。</div>
</div>
<div style="clear:both">このテキストは回り込みを解除して表示したい。</div>
表示
このテキストは左側で回りこんでいます。
このテキストは回り込みを解除して表示したい。
Clearfix による回り込み解除

この問題を解決するために Clearfix という技法が生み出されました。回り込みを含む要素の末尾に見えない . を追加し、その要素に対して clear:both を指定する方法です。

CSS
.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
HTML
<div class="clearfix">
  <img src="../../image/yuki5.gif" alt="" class="float-left">
  <div>このテキストは左側で回りこんでいます。</div>
</div>
<div>このテキストは回り込みを解除して表示したい。</div>
表示
このテキストは左側で回りこんでいます。
このテキストは回り込みを解除して表示したい。
Contain による回り込み解除

IE に未対応でよいなら、contain を使用する方法もおススメです。

CSS
.contain-content { contain: content; }
HTML
<div class="contain-content">
  <img src="../../image/yuki5.gif" alt="" class="float-left">
  <div>このテキストは左側で回りこんでいます。</div>
</div>
<div>このテキストは回り込みを解除して表示したい。</div>
表示
このテキストは左側で回りこんでいます。
このテキストは回り込みを解除して表示したい。
flow-root による回り込み解除

こちらも IE 未サポートの機能ですが、display: flow-root によって回り込みを解除することもできます。

CSS
.flow-root { display: flow-root; }
HTML
<div class="flow-root">
  <img src="../../image/yuki5.gif" alt="" class="float-left">
  <div>このテキストは左側で回りこんでいます。</div>
</div>
<div>このテキストは回り込みを解除して表示したい。</div>
表示
このテキストは左側で回りこんでいます。
このテキストは回り込みを解除して表示したい。

関連項目

clear, display, contain

リンク


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