通过一些JavaScript，我成功地将一个浮动元素固定在它的容器底部——并且仍然让它在文本中浮动，这对于像shape-outside这样的事情非常有用。

被浮动的元素得到一个margin-top赋值，它等于它的容器，减去它自己的高度。这将保留浮动，将元素推到其容器的底边，并防止文本在元素下面流动。

const resizeObserver = new ResizeObserver(entries => {
  if(entries.length == 0) return;
  const entry = entries[0];
  if(!entry.contentRect) return;

  const containerHeight = entry.contentRect.height;
  const imgHeight = imgElem.height;
  const imgOffset = containerHeight - imgHeight;
  
  imgElem.style.marginTop = imgOffset + 'px';
});

const imgElem = document.querySelector('.image');
resizeObserver.observe(imgElem.parentElement);

工作示例:https://codepen.io/strarsis/pen/QWGXGVy

多亏了ResizeObserver和对JavaScript的广泛支持，这似乎是一个非常可靠的解决方案。

这将在页面底部放置一个固定的div，并在向下滚动时修复到页面底部

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

浮动和绝对定位的组合对我来说很有用。我试图把消息的发送时间放在语音气泡的右下角。时间不应该与消息体重叠，除非真的有必要，否则它不会使气泡膨胀。

解决方案是这样的:

有两个跨度，文本完全相同; 一个漂浮着，但看不见; 另一个是绝对定位到角落;

不可见的浮动对象的目的是保证可见对象的空间。

.speech-bubble { font-size: 16px; max-width: 240px; margin: 10px; display: inline-block; background-color: #ccc; border-radius: 5px; padding: 5px; position: relative; } .inline-time { float: right; padding-left: 10px; color: red; } .giant-text { font-size: 36px; } .tremendous-giant-text { font-size: 72px; } .absolute-time { position: absolute; color: green; right: 5px; bottom: 5px; } .hidden { visibility: hidden; } <ul> <li> <span class='speech-bubble'> This text is supposed to wrap the time &lt;span&gt; which always seats at the corner of this bubble. <span class='inline-time'>13:55</span> </span> </li> <li> <span class='speech-bubble'> Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float. <span class='inline-time'>13:55</span> </span> </li> <li> <span class='speech-bubble'> Easy, uh? <span class='inline-time'>13:55</span> </span> </li> <li> <span class='speech-bubble'> Well, not <span class='giant-text'>THAT</span> easy <span class='inline-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> <span class='tremendous-giant-text'>See?</span> <span class='inline-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> The problem is, we can't tell the span to float to right AND bottom... <span class='inline-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> We can combinate float and absolute: use floated span to reserve space (the bubble will be inflated if necessary) so that the absoluted span is safe to go. <span class='inline-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> <span class='tremendous-giant-text'>See?</span> <span class='inline-time'>13:56</span> <span class='absolute-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> Make the floated span invisible. <span class='inline-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> <span class='tremendous-giant-text'>See?</span> <span class='inline-time hidden'>13:56</span> <span class='absolute-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> The giant text here is to simulate images which are common in a typical chat app. <span class='tremendous-giant-text'>Done!</span> <span class='inline-time hidden'>13:56</span> <span class='absolute-time'>13:56</span> </span> </li> </ul>

试试这个CSS+Javascript解决方案。从右上方的浮动div开始，然后计算一个零宽度的div的高度，沿着右边缘将浮动div推到底部。这段代码可能需要一些调整来获得正确的高度。

<style>
  #mainbox {border:4px solid red;width:500px;padding:10px;}
  .rightpad {float:right;clear:right;padding:0;width:0;}
  #floater {background-color:red;text-align:center;color:#FFF;width:300px;height:100px;float:right;margin-right:-10px;margin-top:10px;}
</style>
<script>
window.onload = function() {
  var mmheight = document.getElementById("mainbox").clientHeight;
  var ff = document.getElementById("floater");
  var ffheight = ff.clientHeight;
  var dd = document.createElement('div');
  dd.className = "rightpad";
  dd.style.height = (mmheight - ffheight - 20) * 1 + "px";
  ff.parentNode.insertBefore(dd,ff);
}
</script>
<div id="mainbox">
  <div id="floater" class="rightpad">123</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere tellus et dolor vestibulum gravida. Donec vel nunc massa. Quisque quis varius libero. Fusce ut elementum magna. Praesent hendrerit diam sed velit rutrum mollis. Nunc pretium metus in tempus tempus. Quisque laoreet nibh eget volutpat dictum. Pellentesque libero ipsum, tristique et aliquam aliquam, accumsan sed sem. Phasellus facilisis sem eget mi tempus rhoncus.</p></div>

在与各种技巧斗争了几天之后，我不得不说这似乎是不可能的。即使使用javascript(我不想这样做)，这似乎是不可能的。

To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.

我想我将不得不重新审视这个项目的设计目标，除非有人有最后的建议。

目前这是不可能的。有不同的方法来解决将内容对齐到底边(flex, grid, table, absolute)。然而，这些方法不尊重float，因此内容不会围绕这些元素流动。

如果有一天浏览器和csswg对浮动元素的定义达成一致，那么在css中浮动元素就有可能实现。

先进的资源:

https://drafts.csswg.org/css-page-floats/#float-property

https://github.com/w3c/csswg-drafts/issues/1251