【CSS Modules】clearプロパティの使い方
clearプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
clearプロパティは、CSSレイアウトにおいて、浮動要素（フロート）の回り込みを制御するプロパティです。ウェブページ上で複数の要素を横並びに配置するためにfloatプロパティが使用されますが、floatを適用した要素の後に続く要素が、その浮動要素の隣に回り込んでしまうことがあります。この意図しない回り込みを防ぎ、特定の要素を浮動要素の下に配置し直す役割をclearプロパティが担います。
具体的には、clearプロパティを適用した要素は、その指定された側に浮動要素が存在しない場所まで下に移動して配置されます。これにより、フロートされた要素によってレイアウトが崩れることを防ぎ、要素が意図した位置に確実に表示されるようになります。例えば、サイドバーとメインコンテンツをfloatで横並びにした後に続くフッター要素にclearプロパティを適用することで、サイドバーやメインコンテンツの長さに関わらず、フッターがそれらすべての下に配置されるようになります。
clearプロパティには、主にnone、left、right、bothの四つの値を指定できます。noneはデフォルト値で、浮動要素のクリアを無効にします。leftを指定すると、要素の左側に浮動要素がないように配置され、必要に応じて要素は下に移動します。同様にrightは右側の浮動要素を、bothは左右両側の浮動要素をクリアします。このプロパティは、複雑なレイアウトを構築する際に、要素の配置の安定性を保ち、ウェブページの視覚的な整合性を維持するために非常に重要な役割を果たします。
公式リファレンス: clear
構文(syntax)
1.element { 2 clear: both; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません