使用 overflow 属性与可见值不同的值

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