CSSルール「clear: both」の役割とは

「clear: both」というCSSルールは、要素のフロートをクリアするために使用します。要素にフロート属性を設定すると、通常のドキュメントフローから外れてしまいます。そうすると、フロートした要素の後ろにある要素の位置が、フロートした要素の影響を受けて変わってしまいます。

「clear: both」ルールは、ある要素に適用することで、その要素より下の要素にフロート要素の影響を受けさせず、フロート要素の下にきちんと表示させるためのもの。このルールは、左フロート、右フロート、または左右両方のフロートをクリアするために使用できる。