CSS の「clear:both」の目的は何ですか?

CSS における "clear:both" の役割を理解する

Web ページに左または右にフローティングされる要素がある場合、後続の要素がその周囲に流れるようにします。これを防ぐために、CSS には、特定の側 (左、右) または「両方」に設定できる「clear」プロパティが用意されています。

「clear:both」の使用法とは?

"clear:both" は、左右にフロートされた先行要素の下にドロップするように要素に指示します。これにより、浮動要素の周囲に回り込む可能性があるマージンやパディングをクリアして、新しい行で開始できるようになります。

「clear:both」はどのように機能しますか?

通常のドキュメント フローでは、要素が垂直方向に積み重ねられ、その周囲にコンテンツが流れます。ただし、要素がフローティングされると、要素は左または右に移動し、他のコンテンツがその下に流れることができます。 「clear:both」は、現在の要素が両側で以前にフロートされた要素の下から開始するように指示します。

使用例

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

<div>

この例では、「Left float」div が左にフローティングされ、「これは段落です」テキストがそれを包みます。次に、「両方をクリア」 div を使用して左側と右側の両方をクリアし、「これは新しい段落です」というテキストをその下に新しい行で表示できるようにします。

結論

要素に "clear:both" を設定すると、以前にフローティングされた要素の下の新しい行で要素が開始され、一貫性と制御が保証されます。レイアウト。

以上がCSS の「clear:both」の目的は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。