clear プロパティ

最終更新：2026-09-13

clear clear プロパティ

clear プロパティは、要素が左側、右側、または両側の浮動要素の横に置かれることを許可するかどうかを制御します。left、right、both に設定すると、要素は該当する浮動要素の下に移動します。これは浮動レイアウトでのレイアウト崩れを防ぐための重要なツールです。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS1
状態	標準

📝 構文

clear: none | left | right | both | inline-start | inline-end;

⚙️ 値

値	タイプ	説明
`none \| left \| right \| both`	キーワード	フロートのクリア動作。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
clear	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： clear:both は最もよく使われる値です。要素は両側に浮動要素を許可せず、すべての浮動要素の下に移動します。

注意： clear はブロックレベル要素にのみ機能し、インライン要素には機能しません。現代のレイアウトでは、浮動を解除する推奨方法は clearfix パターン（clear:both を指定した ::after 疑似要素）です。

❓ よくある質問

Qclear と clearfix の違いは何ですか？

Aclear は浮動要素の直後の要素に適用される CSS プロパティで、その要素を浮動要素の下に移動させ、テキストやブロックが横に並ばないようにします。clearfix は浮動を解除する技法であり、通常は親に clear:both を指定した ::after 疑似要素を使い、親が浮動する子要素を再び囲い込み、高さの崩壊を修正します。一方はプロパティ、もう一方は完全な解決策です。

Qclear を浮動要素自体に使用できますか？

Aできますが、注意が必要です。clear を浮動要素に設定すると、同じ方向の前の浮動要素の下に移動します。例えば、float:left かつ clear:left の要素は、それ以前の左浮動要素の下に落ち、すべての浮動要素の下ではありません。clear:both は左右の浮動要素が終わる位置の下に移動させ、浮動画像の後にテキストを新しい行で始める場合によく使われます。

Qclear:both はどういう意味ですか？

Aclear:both は、両側に浮動要素を許可しないことを宣言するため、ブラウザは要素をすべての前の浮動要素の下の新しい行に押し下げます。left は左の浮動のみを解除し、right は右の浮動のみを解除します。clear:both は最もよく使われる値で、::after 疑似要素と組み合わせることで、子要素が浮動しているときに親コンテナが崩壊するのを防ぐ古典的な clearfix 解決策を構成します。

Qclear プロパティが機能しないのはなぜですか？

A一般的な理由：1つ目は、clear はブロックレベル要素にのみ影響するため、span のようなインライン要素には何もしません。2つ目は、要素自体が浮動しているため、clear は前の同じ方向の浮動要素の下にしか移動できず、期待と異なる結果になります。3つ目は、浮動がすでに終わっているため、要素が実際には浮動の影響を受けていないことです。要素がブロックレベルであり、その前に浮動要素があることを確認してください。