CSS で「clear:both」を使用する必要があるのはどのような場合ですか?

CSS での 'clear:both' の使用を理解する

スタイル プロパティ 'clear:both' に遭遇すると、疑問が生じる場合があります。カスケード スタイル シート内のその目的について(CSS).

'clear' プロパティの説明

'clear' プロパティは、要素がドキュメント内でその要素より前にある浮動要素の下で分割されるかどうかを指定します。デフォルトでは、ブロックレベルの要素はフローティング要素の下に自動的に分割されるため、予期しないレイアウトの不一致が生じる可能性があります。

'clear:both' の使用

'clear: 「both」値を指定すると、要素が左揃えか右揃えかに関係なく、先行する浮動要素の下に強制的に配置されます。これにより、要素がその上のフローティング要素と重なったり干渉したりすることがなくなります。

例

次の HTML コードを考えてみましょう:

<div>
<p>この例では、2 番目の div は左に浮いているため、最初の div の右側に表示されます。この重複を避けるために、2 番目の div に「clear:both」スタイルを追加できます:</p>
<pre class="brush:php;toolbar:false"><div>
<p>これにより、2 番目の div が最初の div の下に分割され、正しく表示されるようになります。</p>
<p><strong>追加の使用例</strong></p>
<p>特定のシナリオでは、次のような使用が必要になる場合があります。代わりに「clear:left」または「clear:right」を使用して、クリアする必要がある特定の浮動要素を指定します。たとえば、「clear:left」を使用して左側にフローティングされた要素との重複を防止したり、「clear:right」を右側にフローティングされた要素に使用したりできます。</p>
</div>