CSS - float

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

概要

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

説明

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

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

使用例

.float-left { float: left; }
.float-right { float: right; }
.clear-left { clear: left; }
.clear-right { clear: right; }
.clear-both { clear: both; }

<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 を指定しなくてはならないというのは好ましくありません。

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

Clearfix による回り込み解除

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

.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

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

Contain による回り込み解除

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

.contain-content { contain: content; }

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

flow-root による回り込み解除

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

.flow-root { display: flow-root; }

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

関連項目

clear, display, contain

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/float
• http://www.w3.org/TR/CSS1/#float
• https://w3c.github.io/csswg-drafts/css2/#propdef-float
• http://www.w3.org/TR/css-page-floats-3/#float-property
• https://w3c.github.io/csswg-drafts/css2/#propdef-float

---