path: root/files/ja/web/css/float/index.html

---
title: float
slug: Web/CSS/float
tags:
  - CSS
  - CSS Positioning
  - CSS Property
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/float
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>float</code></strong> は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。</span>要素はウェブページの通常のフローから外れますが、 (<a href="/ja/docs/Web/CSS/position#Absolute_positioning">絶対位置指定</a> とは対照的に) フローの一部であり続けます。</p>

<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<p><ruby><em>浮動要素</em><rp> (</rp><rt>floating element</rt><rp>) </rp></ruby>とは、<code>float</code> の計算値が <code>none</code> 以外の要素です。</p>

<p><code>float</code> は暗黙的にブロックレイアウトの使用を意味しており、 {{cssxref("display")}} の計算値を変更する場合があります。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">指定値</th>
   <th scope="col">計算値</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>inline</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>inline-block</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>inline-table</code></td>
   <td><code>table</code></td>
  </tr>
  <tr>
   <td><code>table-row</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-row-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-column</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-column-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-cell</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-caption</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-header-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-footer-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>inline-flex</code></td>
   <td><code>flex</code></td>
  </tr>
  <tr>
   <td><code>inline-grid</code></td>
   <td><code>grid</code></td>
  </tr>
  <tr>
   <td><em>その他</em></td>
   <td><em>変更されません</em></td>
  </tr>
 </tbody>
</table>

<div class="note"><strong>注:</strong> JavaScript で {{domxref("HTMLElement.style")}} オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは <code>float</code> に対応していますが、古いブラウザーは <code>cssFloat</code> という綴りになり、 Internet Explorer のバージョン 8 以前では、 <code>styleFloat</code> を使用しています。これは、ダッシュ区切りの CSS 名は DOM メンバーとしてキャメルケースで綴るというルールの例外でした (これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 &lt;label&gt; の "for" を "htmlFor" とする必要があったりするのと同じです)。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* グローバル値 */
float: inherit;
float: initial;
float: unset;
</pre>

<p><code>float</code> プロパティは、以下の値からひとつのキーワードを選択して指定します。</p>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code>left</code></dt>
 <dd>要素は、必ずその包含ブロックの左側に浮動します。</dd>
 <dt><code>right</code></dt>
 <dd>要素は、必ずその包含ブロックの右側に浮動します。</dd>
 <dt><code>none</code></dt>
 <dd>要素は決して浮動しません。</dd>
 <dt><code>inline-start</code></dt>
 <dd>要素は、必ずその包含ブロックの始端側に浮動します。 <code>ltr</code> 表記では左側、 <code>rtl</code> 表記では右側になります。</dd>
 <dt><code>inline-end</code></dt>
 <dd>要素は、必ずその包含ブロックの終端側に浮動します。 <code>ltr</code> 表記では右側、 <code>rtl</code> 表記では左側になります。</dd>
</dl>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="How_floated_elements_are_positioned" name="How_floated_elements_are_positioned">浮動要素の位置をどのように決めるか</h3>

<p>上述のとおり、要素は浮動すると、文書の通常のフローから外されます (ただし、フローの一部であり続けます)。浮動要素は、包含ブロックか<em>他の浮動要素</em>の辺に触れるまで、左側または右側に移動させられます。</p>

<p>この例では、3つの赤い正方形があります。このうち2つは左側に浮動しており、1つは右側に浮動しています。2つめの「左の」赤い正方形は、1つめの正方形の右に置かれていることに注意してください。正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。</p>

<p>浮動要素は、少なくともその中に含まれるもっとも高い子の浮動要素と同じ高さでなければなりません。ここでは親を <code>width: 100%</code> かつ浮動要素として、その子の浮動要素を配置するのに十分な高さを確保し、親の幅を保証することで、子孫を浮動解除する必要がなくなるようにしています。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;section&gt;
  &lt;div class="left"&gt;1&lt;/div&gt;
  &lt;div class="left"&gt;2&lt;/div&gt;
  &lt;div class="right"&gt;3&lt;/div&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
     lectus vulputate. Donec id iaculis velit. Aliquam vel
     malesuada erat. Praesent non magna ac massa aliquet tincidunt
     vel in massa. Phasellus feugiat est vel leo finibus congue.&lt;/p&gt;
&lt;/section&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">section {
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}</p>

<h3 id="Clearing_floats" name="Clearing_floats">浮動の解除</h3>

<p>あるアイテムを浮動要素の下へ強制的に移動したいことがあるでしょう。例えば、段落は浮動要素に隣接させたいが、見出しは強制的に単独の行にしたい場合があるでしょう。この例については {{cssxref("clear")}} をご覧ください。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td>値 <code>inline-start</code> および <code>inline-end</code> を追加</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("css.properties.float")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/block_formatting_context">ブロック整形コンテキスト</a></li>
 <li>アイテムを浮動要素の下へ強制的に移動させるには {{cssxref("clear")}} を使用します。</li>
</ul>