CSS浮动:如何将浮动保持在它所属的文本附近？

Question

我有一个包含步骤的程序.一些步骤伴随着图像.

    <p class="imagefloatright"><img src="step 1.png"/></p>
    <ol>
        <li>
          <p>Step 1</p>
          <p class="imagefloatright"><img src="step 2.png"/></p>
        </li>
        <li>
          <p>Step 2</p>
          <p>Step 3</p>
        </li>
    </ol>

和我的CSS:

p.imagefloatright img {
    float: right;
    clear: both;
}

这是默认输出.图像不会与它们所属的步骤保持一致,步骤2的文本放在图像1旁边:

我希望属于第2步的图像与第2步垂直对齐:

过去,我通过在每个浮动图像之前插入一个高度为0的全宽度块,在XSL-FO中实现了我想要的结果.

我可以使用CSS命令实现我想要的布局吗？或者,在将CSS应用于HTML之前,是否需要在HTML中插入块？

Answer 1

清除包含动态内容的浮动，即。图像可以具有动态高度，您需要清除父元素本身。

.imagefloatright {
  clear: both;
}
.imagefloatright img {
  float: right;
}

这意味着您需要clear在包含浮动元素的元素上使用。

为了简洁起见，我将其重命名为：

.clearfix {
  clear: both;
}
.float-right {
  float: right;
}

超文本标记语言

<p class="clearfix"><img class="float-right" src="step 1.png"/></p>
<ol>
    <li>
      <p>Step 1</p>
      <p class="clearfix"><img class="float-right" src="step 2.png"/></p>
    </li>
    <li>
      <p>Step 2</p>
      <p>Step 3</p>
    </li>
</ol>

这是一个演示。