使用 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