有没有一种方法可以让CSS浮动元素从底部开始？

Question

假设有以下HTML：

<div>
  lorem ipsum...
  <img style="float:left;margin-top:-100px" />
</div>

我期望得到的是这样的效果：

但实际上得到的是这样的效果：

.Block {
  width: 300px;
  margin: auto;
}

.Image {
  width: 150px;
  float: left;
  margin-top: -100px;
}

<div class="Block">
  Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
  <br><br>
  Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper.
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" />
</div>

这里有一个展示代码行为的笔。类似这样的代码是否可以实现？为什么margin-bottom会出现我期望的行为，但是margin-top则不会呢？

- mmilo

---

经过大量阅读，似乎这是不可能做到的事情，但我仍然保留这个问题，以防有些坚定的读者能够证明我错了。 - mmilo

Answer 1

有几种方法可以对齐标签，并添加一些文本标签，以获得您在问题中要求的第一个img的结果。

解决方案1：我们添加了2个<p>标签。然后使用nth-child()选择器为第二个<p>标签添加margin-left，其值等于图像宽度+10px。并且还添加了负值，以将标签移到顶部并替换第二个<p>标签。

.box{
  width:300px;
  margin:auto;
  position:relative;
}
.box > p:nth-child(2){
  margin-left:110px;
}
.image{
  width:100px;
  margin-top:-140px;
  float:left;
}

<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p>
<p>
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est. 
</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
</div>

解决方案2：我们添加了2个<p>标签。但是这一次没有向img标签或.image添加负边距，只需左浮动，甚至没有第二个<p>标签的margin-left值。好吧，那是因为我们对.image使用了float:left，并对第二个<p>标签使用了float:right，所以它们默认会对齐。

.box{
  width:300px;
  margin:auto;
  position:relative;
}
.box > p:nth-child(2){
  float:right;
  width:180px;
  margin:0px;
}
.image{
  width:100px;
  float:left;
}

<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p>
<p>
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est. 
</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
</div>

解决方案3：无需添加任何<p>标签或其他标签来样式化您的文本，但如果您为文本添加一些默认分配的标签，则是一个好习惯。 只需更改您的HTML代码，即在文本中间添加<img>，然后它就可以正常工作了。

.box{
  width:300px;
  margin:auto;
  position:relative;
}
.image{
  width:100px;
  float:left;
  padding:10px 10px 0px 0px;
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est. 

</div>

margin-top (正值) - 当我们给一个元素赋予margin-top 正值时，它会从顶部向下推动该元素，如果在下面有其他元素，则也会向下移动一点。

margin-top (负值) - 但是，当我们给一个元素赋予margin-top 负值时，此时我们使该元素进入另一个已经分配了某些属性的元素区域，即将下方向上拉或强制。

这也是你问题的原因，要么更改HTML代码即在文本中添加<img>，要么添加<p>标签并进行处理。

- frnt

Answer 2

.Block {
  width: 300px;
  margin: auto;
}

.Image {
  width: 100px;
  height:100px;
  float:left;
  margin-right: 1em;

}

<div class="Block">
  Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
  <br><br>
  Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" /> Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper.
  
</div>

- Gowtham

---

嘿Gowtham，谢谢你的回复，但是我觉得你可能忽略了底部浮动元素是问题的主要方面。在内容的中间进行浮动是可以的，但这并没有解决我的疑问。 - mmilo

这是一段没有任何解释的代码块。看起来你的建议是“将图像放在文本中间，然后移动它直到它浮动到正确的位置”。这是一种极其脆弱的方法，无法处理变宽内容，并且可能会因为计算机之间的字体差异等简单问题而出现错误。 - Quentin