明確なプロパティ

私たちが使用するときfloatプロパティであり、次の要素が下 (右または左ではなく) に必要な場合は、clear財産。

のclearプロパティは、浮動要素の隣にある要素の処理を指定します。

のclearプロパティには、次のいずれかの値を指定できます。

• none- 要素が下に押されていない 左または右の浮動要素。これがデフォルトです
• left- 要素が左下に押されます 浮遊要素
• right- 要素が下に押し出される 右浮動要素
• both- 要素は両方の下に押されます 左右のフローティング要素
• inherit- 要素は明確な値を継承します その親から

フロートをクリアするときは、クリアをフロートに一致させる必要があります。要素が左にフロートしている場合は、左にクリアする必要があります。フロートされた要素は引き続きフロートしますが、クリアされた要素は Web ページのその下に表示されます。

クリアフィックスのハック

フロート要素がそれを含む要素よりも高い場合、コンテナーの外に「オーバーフロー」します。次に、clearfix ハックを追加して、この問題を解決できます。

クリアフィックスなし

クリアフィックス付き

のoverflow: autoclearfix は、マージンとパディングを制御できる限りうまく機能します (そうしないと、スクロールバーが表示される場合があります)。の新しい、最新の clearfix ハックただし、使用する方が安全であり、ほとんどの Web ページで次のコードが使用されています。