This page was translated from English by the community. Learn more and join the MDN Web Docs community.

clear

CSS の clear プロパティは、要素が先行する浮動要素の下に移動 (clear) する必要があるかどうかを設定します。 clear プロパティは、浮動要素と非浮動要素のどちらにも適用されます。

非浮動ブロックに適用された場合は、その要素の境界の辺が、関係するすべての浮動要素のマージンの辺より下まで下に移動します。非浮動ブロックの上マージンは折り畳まれます。

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

解除されることに関連する浮動要素は、その前の浮動要素と同一のブロック整形コンテキスト内の先行する浮動要素です。

メモ: 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは clearfix と呼ばれます。また、実現方法のひとつとして、置換 ::after 疑似要素 に clear を使います。

#container::after {
  content: "";
  display: block;
  clear: both;
}

構文

/* キーワード値 */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

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

値

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

形式文法

none | left | right | both | inline-start | inline-end

例

clear: left

HTML

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

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%;
}

clear: right

HTML

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

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%;
}

clear: both

HTML

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

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%;
}

仕様書

仕様書 状態 備考
CSS Logical Properties and Values Level 1
float and clear の定義		 編集者草案 値 inline-start および inline-end を追加
CSS Level 2 (Revision 1)
clear の定義		 勧告 重要な変更はないが、細部が明瞭になった
CSS Level 1
clear の定義		 勧告 初回定義

初期値none
適用対象ブロックレベル要素
継承なし
計算値指定通り
アニメーションの種類離散値

ブラウザーの互換性

BCD tables only load in the browser

関連情報