CSSにおけるクリアフィックスと親要素の高さ

クラスparentを持つ1つのdivを残し、 その中のテキストを削除して、浮動する画像だけを 残しましょう。ご存知の通り、この場合 divの高さはゼロに崩壊し、上と下の境界線だけが 残ります。画像はdivの下側にはみ出してしまいます:

html<div class="parent">
  <img src="img.png" alt="">
</div>

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

Результат:

浮動する画像がdivの高さを拡張するように してみましょう。これには巧妙な方法が使われます - 画像の後に、クラスclearfixを持つ テキストのないdivを配置します。

画像は浮動要素であり、親の高さを拡張しませんが、 divクリアフィックスは浮動せず、親の高さに 影響を与えます。

divクリアフィックスにはプロパティclearが 設定されているため、画像によって押し下げられ、 その下に位置しつつ、それによって親の高さを 拡張することになります。

divクリアフィックス自体は空で画面には表示されませんが、 同時に親の高さを拡張します。

それでは、試してみましょう:

html<div class="parent">
  <img src="img.png" alt="">
  <div class="clearfix"></div>
</div>

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат: