使用溢出创建的块格式化上下文

使用具有与 visible 不同的值的 overflow 属性将创建新的块格式化上下文。这对于将浮动元素旁边的块元素对齐非常有用。

CSS

img {
    float:left;
    margin-right: 10px;
}
 div {
     overflow:hidden; /* creates block formatting context */
}

HTML

<img src="http://placehold.it/100x100">
<div>
  <p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
  <p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>

结果

此示例显示 div 中具有 overflow 属性集的段落将如何与浮动图像交互。