clear

style.css

/* 回り込みを解除しない（初期値） */
.item { clear: none;}

/* 左側の浮動要素の回り込みを解除 */
.after-left-float { clear: left;}

/* 右側の浮動要素の回り込みを解除 */
.after-right-float { clear: right;}

/* 左右両方の浮動要素の回り込みを解除 */
.clearfix-item { clear: both;}

/* よく使うパターン: フロートの後に clearfix を置く */
.sidebar { float: left; width: 30%;}
.main-content { float: right; width: 65%;}
.footer { clear: both;} /* footer がサイドバーとメインコンテンツの下に配置される */

<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
<p style="clear: left;">ここはp要素です。『clear: left』と指定し、手前にいる浮動要素の回りこみを解除しています。</p>

<div style="float: right; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: right』、『width: 200px』と指定しています。</div>
<p style="clear: right;">ここはp要素です。『clear: right』と指定し、手前にいる浮動要素の回りこみを解除しています。</p>

<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
<p style="clear: both;">ここはp要素です。『clear: both』と指定し、手前にいる浮動要素の回りこみを解除しています。</p>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

手前に存在しているフロートされた要素(浮動要素)の回り込みを解除します。

厳密には手前にいる浮動要素の回りこみを解除しているというわけではなく、手前にいる浮動要素の高さと同じだけの上方向のマージンを自動生成するという処理が行われています。自動生成された上方向のマージンは『クリアランス』と呼ばれます。ちなみに、『clear』プロパティと『margin-top』プロパティを同時に指定してしまった場合は『clear』プロパティで生成した『クリアランス』が優先されますのでご注意ください。

<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
<p style="clear: both; margin-top: 1000px;">ここはp要素です。『clear: both』、『margin-top: 1000px』と指定しています。『クリアランス』が優先されるため、上方向のマージンは『1000px』になりません。</p>