CSS レイアウト - clearとclearfix
clearプロパティ
floatプロパティを使用し、次の要素を下(右や左ではなく)に配置する場合は、clearプロパティを使用する必要があります。
clearプロパティは、フローティング要素の隣にある要素の処理を指定します。
clearプロパティには、次のいずれかの値を指定できます。
-
none- 要素は左または右のフロート要素の下に押し出されません。これはデフォルトです。 -
left- 要素は左のフロート要素の下に押し出されます。 -
right- 要素は右のフロート要素の下に押し出されます。 -
both- 要素は左と右の両方のフロート要素の下に押し出されます。 -
inherit- 要素は親からclear値を継承します。
フロートをクリアするときは、クリアをフロートに一致させる必要があります。要素が左にフロートしている場合は、左にクリアする必要があります。フロートされた要素は引き続きフロートしますが、クリアされた要素はWebページのその下に表示されます。
例
この例では、フロートを左にクリアします。ここでは、 <div2>要素が左の浮動<div1>要素の下にプッシュされることを意味します。
div1 {
float: left;
}
div2 {
clear: left;
}
自分で試してみる »クリアフィックスのハック
フロート要素がそれを含む要素よりも高い場合、コンテナーの外に「オーバーフロー」します。次に、clearfixハックを追加して、この問題を解決できます。
クリアフィックスなし
クリアフィックス付き
overflow: autoclearfix は、マージンとパディングを制御できる限りうまく機能します (そうしないと、スクロールバーが表示される場合があります)。ただし新しい最新のclearfixハックただし、使用する方が安全であり、ほとんどのWebページで次のコードが使用されています。
::after疑似要素については、後の章で詳しく説明します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。