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

---
title: clear
slug: Web/CSS/clear
tags:
  - CSS
  - CSS プロパティ
  - CSS 位置指定レイアウト
  - Reference
translation_of: Web/CSS/clear
---
<div>{{CSSRef}}</div>

<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>clear</code></strong> プロパティは、要素が先行する<a href="/ja/docs/Web/CSS/float">浮動</a>要素の下に移動 (clear) する必要があるかどうかを設定します。 <code>clear</code> プロパティは、浮動要素と非浮動要素のどちらにも適用されます。</p>

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

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

<p>非浮動ブロックに適用された場合は、その要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">境界の辺</a>が、関係するすべての浮動要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin-area">マージンの辺</a>より下まで下に移動します。非浮動ブロックの上マージンは折り畳まれます。</p>

<p>一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。</p>

<p>解除されることに関連する浮動要素は、その前の浮動要素と<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">同一のブロック整形コンテキスト</a>内の先行する浮動要素です。</p>

<div class="note">
<p><strong>メモ:</strong> 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは <strong>clearfix</strong> と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a> に <code>clear</code> を使います。</p>

<pre class="brush: css">#container::after {
  content: "";
  display: block;
  clear: both;
}
</pre>
</div>

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

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

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

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

<dl>
 <dt><code>none</code></dt>
 <dd>要素は先行するフロートと切り離されず、下に移動しません。</dd>
 <dt><code>left</code></dt>
 <dd>要素は先行する <em>左の </em>フロートと切り離され、下に移動します。</dd>
 <dt><code>right</code></dt>
 <dd>要素は先行する<em> 右の</em> フロートと切り離され、下に移動します。</dd>
 <dt><code>both</code></dt>
 <dd>要素は先行する<em> 左右両方の </em>フロートと切り離され、下に移動します。</dd>
 <dt><code>inline-start</code></dt>
 <dd>要素は、先行する<em>包含ブロックの始端側</em>のフロートの下に移動することを示すキーワードです。これは ltr 表記では<em>左側</em>、rtl 表記では<em>右側</em>のフロートです。</dd>
 <dt><code>inline-end</code></dt>
 <dd>要素は、先行する<em>包含ブロックの終端側</em>のフロートの下に移動することを示すキーワードです。これは ltr 表記では<em>右側</em>、rtl 表記では<em>左側</em>のフロートです。</dd>
</dl>

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

{{csssyntax}}

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

<h3 id="clear-left" name="clear-left">clear: left</h3>

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

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
  &lt;p class="left"&gt;This paragraph clears left.&lt;/p&gt;
&lt;/div&gt;
</pre>

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

<pre class="brush: css">.wrapper{
  border:1px solid black;
  padding:10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width:20%;
}
p {
  width: 50%;
}
</pre>

<p>{{ EmbedLiveSample('clear-left','100%','250') }}</p>

<h3 id="clear-right" name="clear-right">clear: right</h3>

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

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
  &lt;p class="right"&gt;This paragraph clears right.&lt;/p&gt;
&lt;/div&gt;
</pre>

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

<pre class="brush: css">.wrapper{
  border:1px solid black;
  padding:10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width:20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width:20%;
}
p {
  width: 50%;
}</pre>

<p>{{ EmbedLiveSample('clear-right','100%','250') }}</p>

<h3 id="clear-both" name="clear-both">clear: both</h3>

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

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="both"&gt;This paragraph clears both.&lt;/p&gt;
&lt;/div&gt;
</pre>

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

<pre class="brush: css">.wrapper{
  border:1px solid black;
  padding:10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width:20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width:20%;
}
p {
  width: 45%;
}</pre>

<p>{{ EmbedLiveSample('clear-both','100%','300') }}</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#flow-control', 'clear')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>重要な変更はないが、細部が明瞭になった</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

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

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

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

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

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="CSS/box_model">CSS 基本ボックスモデル</a></li>
</ul>