TECH I.S.

CSS レイアウト - clear と clearfix


明確なプロパティ

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

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

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

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

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

この例では、フロートを左にクリアします。ここでは、 <div2> 要素が左の浮動 <div1> 要素の下にプッシュされることを意味します。

div1 {   float: left; } div2 {   clear: left; }

自分で試してみる »


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

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

クリアフィックスなし

クリアフィックス付き

.clearfix {   overflow: auto; }

自分で試してみる »

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

.clearfix::after {   content: "";   clear: both;   display: table; }

自分で試してみる »

について詳しく学びます。::after後の章の疑似要素。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細