要素の回り込みを解除する

CSS - clear

概要

CSSプロパティ「clear」 は、float プロパティによって右寄せ、左寄せを指定された要素に対して、回り込みの解除をすることができます。

<div class="float-left">
float: left要素
</div>
<div class="float-right">
float: right要素
</div>
<div class="clear">
clear: 回り込み解除指定
</div>

<style>
div {
  border: 1px solid #000;
  margin-bottom: 10px;
}
.float-left {
  float: left;
  width: 150px;
}
.float-right {
  float: right;
  width: 150px;
}
.clear {
  clear: both;
}
</style>

値の指定方法

{ clear: 値 }

float プロパティで指定された要素に対して各値の振る舞いです。

説明
left左寄せを解除します
right右寄せを解除します
bothすべて解除します
none解除しません

使用方法

現場でよく使われる例です。回り込みを解除する為専用のclassを作り回り込みをする要素の親要素に付与します。そしてこのclassは擬似要素を使って、回り込み解除用のコンテンツを挿入します。そうすることで、その他のコンテンツに影響が出ないようにします。

<div class="clear">
  <div class="float-left">
  float: left要素
  </div>
  <div class="float-right">
  float: right要素
  </div>
</div>
<div>回り込み以降の要素</div>

<style>
div {
  border: 1px solid #000;
  margin-bottom: 10px;
}
.float-left {
  float: left;
  width: 150px;
}
.float-right {
  float: right;
  width: 150px;
}
.clear:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}
</style>

仕様書

関連CSSプロパティ