CSSのclearプロパティによる回り込み解除

このような問題を解決するために、回り込みを解除する特別な プロパティclearが存在します。 値leftは左側の回り込みを解除し、 値rightは右側を、 値bothは両側の回り込みを解除します。この値が 最も頻繁に使用されます。

したがって、プロパティclearは回り込みを解除します。 今回のケースでは、これにより最初のdiv内の浮動画像が 2番目のdivにはみ出さないようにすることができます。

ただし、clearは、浮動要素が はみ出してはならない要素、つまり今回のケースでは 2番目のdivに適用する必要があります。

それではやってみましょう - 2番目のdivに parentクラスに加えてclearfixクラスも与え、 この新しいクラスに対してclearプロパティを 値bothで設定します - 画像のはみ出しが 消えます:

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

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

.clearfix {
  clear: both;
}

Результат:

名前clearfixは一般的に受け入れられているため、 今後はこれを使用してください。