以标签结尾停止浮动

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>

我想避免在下一个style="clear: both;"div上添加，但希望浮动图像在第一个 top-level 的末尾自动停止浮动，因此每个 div 可以具有相同的样式类：</div>

<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

您应该能够clear使用after选择器添加。您可以将其添加到 CSS 文件中：

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

这当然是我的猜测。如果没有你的 CSS，我没有正确的方法来测试它。