CSSでのclearの使い方

CSSの中で、clearプロパティは要素のフロート動作を制御するために使用されます。

clear属性には以下の可能な値があります：

1. デフォルトの値であり、要素は浮動要素の影響を受けず、浮動要素と共存できることを示します。
2. 左：要素のトップは、フロート要素を含めることはできません。
3. 右側にフロートしている要素を元素のトップレベルに配置することは許可されません。
4. 元素の上部には、左右どちらにフロートしているかにかかわらず、フロート要素を表示させることができません。

通常、clear属性は、要素の浮動をクリアする必要がある場合に使用され、特定の要素が浮動要素の影響を受けないようにします。例えば、ある要素の前に浮動要素がある場合、その要素が浮動要素の下に表示されるようにするために、clear属性を使用することができます。

コードの例：

<div class="float-left"></div>
<div class="clear"></div>

.float-left {
  float: left;
  width: 200px;
  height: 200px;
}

.clear {
  clear: both;
}

最初のdiv要素は、左側に浮動するfloatのプロパティを使用しており、2番目のdiv要素はclearのプロパティを使用して浮動を解除し、最初のdiv要素の下に配置されます。