CSS float : how to keep the float near the text it belongs to?

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 步垂直对齐:

过去，我通过在每个 float 图像前插入一个高度为 0 的全 Angular block ，在 XSL-FO 中实现了我想要的结果。

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

Answer 1

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

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

这意味着您需要对包含 float 元素的元素使用clear。

---

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

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

HTML

<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>

---

这是一个 demo .