CSS - float - とほほのWWW入門

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

画像などの表示位置を指定します。left や right を指定すると、テキストがその周りを回り込むように表示されます。回り込みを解除するには 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 という技法が生み出されました。回り込みを含む要素の末尾に見えない . を追加し、その要素に対して 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>

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>

こちらも 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

CSS - float

概要

説明

使用例

回り込みの解除

Clearfix による回り込み解除

Contain による回り込み解除

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

関連項目

リンク