clear

CSS の clear プロパティは、要素が、先行する 浮動 要素の隣にまわりこむか、それとも、その下に下げられる (関係が解消 (clear) される) 必要があるのかを指定します。clear プロパティは、浮動要素と非浮動要素のどちらにも用いられます。

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

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

非浮動要素に用いられると、その要素の ボーダー境界 を動かし、関係するフロートすべての マージン境界 より下になるまで下げます。この動きからは マージンの相殺 は起きません。

浮動要素に用いられると、その要素の マージン境界 を動かし、関係するフロートすべての マージン境界 よりも下に下げます。この動きはそれ以降のフロートの位置に影響しますが、これは、フロートが先行するフロートより高くに置けないためです。

clear の動作に関係するフロートは、同一のブロック整形文脈 内の先行するフロートです。

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

構文

値

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

仕様書

ブラウザー実装状況

関連情報

• ボックスモデル