CSSにおけるクリアの役割は何ですか

CSSのclear属性は、後続の要素に対する浮動要素の影響をクリアし、後続の要素が正常に配置されるようにするために使用されます。 Clear 属性には 4 つの値があります: none: フロートをクリアしません。 left: 左のフロートをクリアします。 right: 右のフロートを両方クリアします。 左右のフロートをクリアします。 CSS におけるクリアの役割

CSS レイアウト 、 clear 属性は、後続の要素に対するフローティング要素の影響をクリアするために使用されます。フローティング要素は後続の要素の位置に影響を与え、後続の要素が正常に配置されなくなります。

フロートのクリア

clear 属性には次の値があります:

none: フロートをクリアしません。

左:

左側のフローティング要素をクリアします。
• 右:
右側のフローティング要素をクリアします。
• 両方:
左側と右側のフローティング要素をクリアします。
使用シナリオ
• 後続の要素をフローティング要素の下に通常どおり配置する必要がある場合は、clear 属性を使用できます。例:

<code class="css">.container {
  width: 100%;
}

.float-left {
  float: left;
  width: 50%;
}

.clear {
  clear: both;
}</code>

この例では、.float-left 要素が左側にフロートし、.clear 要素が clear: によってフローティング要素の影響をクリアするため、後続の要素は正常に配置されます。

例

次の図は、clear 属性の使用例です:

[図は 2 つの要素を示しています。左側の要素はフローティングで、右側の要素はクリアを使用しています: 両方]

右側の要素はクリアを使用しています: 両方

[図は浮動要素がクリアされ、右側の要素が正常に配置されたことを示しています]

以上がCSSにおけるクリアの役割は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。