「clear:both」スタイル プロパティは要素の配置にどのような影響を与えますか?

「clear:both」スタイルの影響を理解する

Web 開発では、ページ上の要素の位置を制御することが重要です。この点で重要な役割を果たす重要なスタイル プロパティの 1 つは、「clear:both」です。

「clear」とは何ですか?

「clear」プロパティは、どのように制御するかを制御します。要素は、その前の浮動要素と相互作用します。要素が「clear:both」に設定されている場合、その要素は同じ親コンテナ内の浮動要素の下に強制的にドロップされます。これは、その要素が、HTML ソース コード内でその前にあるすべてのフローティング要素の下に表示されることを意味します。

「clear:both」の仕組み

仕組みを理解するには " 「clear:both」は機能します。例を考えてみましょう:

<div>
<p>上記の HTML コードがある場合、「Not Cleared」 div は、「float: left;」であるため、「Left Float」div の横に表示されます。 </p>
<p>「Left Float」 div の下に「Not Cleared」 div を強制的に表示するには、「clear:both;」を追加します。 style to it:</p>
<pre class="brush:php;toolbar:false"><div>
<p>このシナリオでは、「Cleared」div は、「Left Float」およびその他の先行する浮動要素の両方の下にドロップされます。上にフローティング要素がないように動作し、すべてのフローティング コンテンツの下に表示されるようにします。</p>
<p><strong>「clear」のその他のバリエーション</strong></p>
<p>「clear:both」以外」、「clear:left」および「clear:right」も使用できます。これらのバリエーションは、要素がどちらの側に下に落ちるかを制御します。 "clear:left" は要素を左に揃えられた先行の浮動要素の下に強制的にドロップしますが、"clear:right" は右に揃えられた要素を対象とします。</p>
</div>