CSS
コンテキストをブロックする

備考

オーバーフロープロパティをvisibleと異なる値で使用する

img{
  float:left;
  width:100px;
  margin:0 10px;
}
.div1{
  background:#f1f1f1;
  /* does not create block formatting context */
}
.div2{
  background:#f1f1f1;
  overflow:hidden;
  /* creates block formatting context */
}

https://jsfiddle.net/MadalinaTn/qkwwmu6m/2/

visible（デフォルト）と異なる値を持つoverflowプロパティを使用すると、新しいブロック書式設定コンテキストが作成されます。これは技術的に必要です。浮動小数点がスクロール要素と交差すると、強制的に内容を再ラップします。

段落の数が浮動イメージとどのように作用するかを示すこの例は 、 この例の css-tricks.comに似ています。

2 ： https : //developer.mozilla.org/en-US/docs/Web/CSS/overflow MDN