如何防止物体缠绕浮动图像？

Question

下图显示了向左浮动的<img>标记的结果。边距并未全部解决，但<h1>标记正在包装。

问题：棕色区域中的图书统计信息位于<table>块内。当它包裹时，它将作为一个完整的块包裹，如图所示。是否可以从<table>？

引起的包装中排除<img style="float:left;">块

• 我尝试同时使用position和float。它没用。 <clear>仅适用于浮动对象，而不适用于包装对象。

• 从概念上讲，我正在寻找以下虚构的CSS分配，该分配将应用于<table>代码：ignore-float:true

Answer 1

据我所知，您正在寻找的是HTML标记的当前顺序。如果你在图像和表格周围添加另一个div，并且浮动div本身，那么表格将保留在图像下面，其他元素将环绕它们。

<h1>Header</h1>
<div class="image-wrap">
  <img src="..." alt="" />
  <table> ... </table>
</div>
<p>Paragraph text</p>

和你的CSS：

.image-wrap { float: left; max-width: 200px; }
.image-wrap img { display: block; }