clear

div.test { float: none;}
div.test1 { float: left;}
div.test2 { float: right;}

<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>