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

我有一个由步骤组成的程序。有些步骤伴随着图像

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

这是默认输出。图像不会停留在它们所属的步骤中，步骤2的文本与图像1放在一起：

我希望属于步骤2的图像与步骤2垂直对齐：

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

我可以使用CSS命令实现我想要的布局吗？

---

或者，在将CSS应用于HTML之前，是否需要在HTML中插入块？

您应该在

p

元素上使用

clear

属性，而不是在要停止浮动的位置创建另一个元素

p.imagefloatright img{
浮动：对；
}
.清楚{
明确：两者皆有；
}

第一步


步骤2

clearfix

应该有帮助：

.clearfix:after {
  display: block;
  content: "";
  clear: both;
}

以及html：

<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p class="clearfix">Step 1</p>
<p class="imagefloatright"><img src="http://via.placeholder.com/80x80"/></p>
<p class="clearfix">Step 2</p>
<p>Step 3</p>

步骤1

步骤2

步骤3

如果每个具有图像的步骤只有一个图像，并且一个图像不会被多个步骤共享，则可以编写一个选择器，使以下步骤清除每个浮动图像，但这是非常严格的：

p.imagefloatright img{
明确：两者皆有；
浮动：对；
}
p、 imagefloatright+p:不是（.imagefloatright）+p{
明确：两者皆有；
}

第一步



步骤2

步骤3

为什么不使用伪元素

p，.imagefloatright img{margin:0.25em；}
.右img{
浮动：对；
}
.imagefloatright:：之前{
明确：两者皆有；
内容：''；
显示：块；
}

第一步


步骤2

步骤3


步骤4

步骤5

您可以使用此

 <p>
    <span class="left">1</span>
       <img class="right"  src="http://via.placeholder.com/90x90" alt="">
  </p>

   <p>
    <span class="left">2</span>
       <img class="right"  src="http://via.placeholder.com/90x90" alt="">
  </p>

---

以下是使用flexbox的简单方法：

ol{
列表样式：无；
填充：0；
保证金：0；
}
李{
显示器：flex；
/*举例说明*/
边框：1px实心；
填充物：5px；
}
img{
左边距：自动；
}

第一步


步骤2


步骤3


步骤4

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

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

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

clear

---

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

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

HTML

第一步




步骤2

步骤3

---

---

这里有一个答案。

这很容易做到。当您使用css float属性时，必须对其父元素使用溢出。在你的情况下：

p.imagefloatright{
   overflow: auto;
}

---

我们必须解决这个问题。阅读更多关于解决方案1：使用Flex的信息

我建议使用

flex

和

justify content:space-between

使用它的唯一缺点是，如果您支持较旧的浏览器，如IE10，那么您可以查看更多信息

至于

之间的空间，根据

项目沿主轴均匀分布在对齐容器中。每对相邻项目之间的间距相同。第一个项目与主起始边缘齐平，最后一个项目与主结束边缘齐平

也就是说，第一个子元素与父元素的开头对齐，最后一个子元素与结尾对齐，剩余空间在其他子元素（如果存在）之间平均分配，如果
img
始终是最后一个子元素，则无论存在多少子元素
div
s，这将为您提供所需的布局

就我个人而言，我会发现使用
flex
是在页面上“定位”和“布局”不同元素的最方便、最干净的方法之一

你可以找到下面的代码和一把小提琴

HTML

解决方案2：使用浮点

您也可以仍然使用
float
，但在这种情况下，您需要清除
p
，而不是
img
，并将其浮动

由于包含元素的所有元素都是浮动的，因此在
li
标记中添加
clearfix
是很重要的。如果不折叠为空，您可以找到更多信息

所以你的代码会喜欢这样，你可以找到一个工作小提琴

HTML

如果有什么不清楚的地方，请不要犹豫再问我
 您可以在
li
标记中使用
after
伪元素来获取浮动元素的高度。此外，您还必须指定只希望使用
选择器浮动li标记内的元素


ol{
填充：0；
}
李{
填充：10px；
列表样式：无；
背景：#eee；
利润率：10px0；
宽度：自动；
}
李：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
li>p{
宽度：25%；
浮动：左；
}
p{
保证金：0；
}


第一步




步骤2

步骤3


但为什么？clear属性的设计目的是能够在不使用专用清算元素的情况下使用-替换
。它应该在浮动元素之后，而不是之前。我现在将用另一个例子来扩展我的答案。是的，你不需要一个单独的元素，你只需要将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>

p.imagefloatright{
   overflow: auto;
}

<ol class="step-list">
  <li class="step">
    <p>Step 1</p>
    <img src="https://placehold.it/150x150?text=Step1" alt="">
  </li>
  <li class="step">
    <p>Step 2</p>
  </li>
  <li class="step">
    <p>Step 3</p>
  </li>
  <li class="step">
    <p>Step 4</p>
    <img src="https://placehold.it/150x150?text=Step4" alt="">
  </li>
</ol>

.step-list {
  list-style: none;
}

.step {
  display: flex;
  justify-content: space-between;
}

<ol class="step-list">
  <li class="step">
    <p>Step 1</p>
    <img src="http://placehold.it/150x150?text=Step1" alt="">
  </li>
  <li class="step">
    <p>Step 2</p>
  </li>
  <li class="step">
    <p>Step 3</p>
  </li>
  <li class="step">
    <p>Step 4</p>
    <img src="http://placehold.it/150x150?text=Step4" alt="">
  </li>
</ol>

.step-list {
  list-style: none;
}

.step img {
  float: right;
}

.step p {
  float: left;
}

/*This is what is called a clearfix solution, for the floating problem*/
.step::after {
  content: "";
  display: block; 
  clear: both;
}