使用溢位建立的塊格式化上下文

使用具有與 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 屬性集的段落將如何與浮動影象互動。