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

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

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

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

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

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

使用例

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

この例では、「Left float」div が左にフローティングされ、「これは段落です」テキストがそれを包みます。次に、「両方をクリア」 div を使用して左側と右側の両方をクリアし、「これは新しい段落です」というテキストをその下の新しい行に表示できるようにします。
結論 
要素に「clear:both」を設定すると、以前にフローティングされた要素の下の新しい行で要素が始まるようになり、一貫性のある制御されたレイアウトが保証されます。