CSS スタイリングにおける「clear:both」の役割を理解する

Web デザインを扱うときは、フローティングの概念を理解することが重要です要素とその位置を制御する方法。 「clear: Both」スタイル属性は、このコンテキストで貴重なツールとして登場します。

「clear: Both」の説明

「clear: Both」プロパティにより、次のことが可能になります。その前にある float 要素の下のスペースを占める要素。要素を強制的に新しい行で開始し、フローティングされた要素と重なったり干渉したりしないようにします。

仕組み

要素をフローティングすると移動します。ドキュメントの通常の流れから外れるため、他の要素がドキュメントの周囲に回り込むことが可能になります。 「clear: Both」を適用すると、現在の要素に、先行する浮動小数点数の存在を無視し、それらが存在しないかのように動作するように指示します。この動作は、次のコード例で示されています。

この場合、「clear:both」を含む div は新しい行で始まり、表示されないようにします。 
バリエーションと例
「clear: left」または「clear: left」を使用して、要素をクリアする方向をさらに指定できます。 「クリア：そうです。」これらのオプションを使用すると、左または右に設定されているフロートをクリアできます。
たとえば、2 つのサイドバーと中央にメイン コンテンツ領域があるレイアウトの場合は、「clear: Both」を使用できます。メインコンテンツの div で、フロートの方向に関係なく、両方のサイドバーの下のスペースを確実に占有するようにします。