停止在标签末尾浮动

Question

我想创建一个浮动在图像周围的文本。接下来的段落应该只围绕下一张图片浮动。

<div>
   <div style="float: right; padding: 0 0 1em 1em;">
      <img src="myImage1.png" .../>
   </div>
   <p>
       This text should float around the...
   </p>
   <p>
       ... above myImage1.png.
   </p>
</div>

<div style="clear: both;">
   <div style="float: right; padding: 0 0 1em 1em;">
      <img src="myImage2.png" .../>
   </div>
   <p>
       This text should float around the...
   </p>
   <p>
       ... above myImage2.png.
   </p>
</div>

我想避免必须在 下一个 div 上添加 style="clear: both;"，但希望浮动图像在第一个结束时自动停止浮动顶级 </div>，因此每个 div 可以具有相同的样式 class:

<div class="floatBlock">
   ...
</div>

<div class="floatBlock">
   ...
</div>

如果里面有 -tags（第一个 floatBlock 的图像不应浮动在 h3 下方），这将特别有用：

<div class="floatBlock">
   ...
</div>

<h3>Lorem ipsum</h3>

<div class="floatBlock">
   ...
</div>

我希望我描述的目标可以理解。

如何定义 floatBlock 的样式，使嵌套图像不会浮在外面？

Answer 1

您应该可以使用 after 选择器添加 clear。您可以在 CSS 文件中添加：

.floatBlock:after {
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

这当然是我猜的。没有你的 CSS.

我没有合适的方法来测试它

Answer 2

没有理由不能将 clear:both 应用于所有元素。所以你可以在你的 class 中这样做：

.floatBlock{
    clear:both;
}

Here is a working example

如果你需要应对短测试和大图像，并且在 floatBlock 元素之间还有其他元素（根据评论），那么在每个元素之后放置一个清晰的元素是有意义的.像这样：

<div class="floatBlock">
    ...
</div>
<div class="clear"></div>

.clear {
    clear:both;
}

Here is a working example

停止在标签末尾浮动

Stop floating with the end of a tag

html

css

css-float