让它起作用的方法如下:

像往常一样将元素向左浮动 使用旋转父div 180度 -moz-transform:旋转(180度); -webkit-transform:旋转(180度); -o-transform:旋转(180度); -ms-transform:旋转(180度); 过滤器:progid: DXImageTransform.Microsoft.BasicImage(旋转= 2); JSfiddle: http://jsfiddle.net/wcneY/ 现在将所有向左浮动的元素(给它们一个类)旋转180度，使它们再次平直。瞧!他们浮到水底。

在与各种技巧斗争了几天之后，我不得不说这似乎是不可能的。即使使用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

要将任何元素放在其容器的底部，只需使用以下命令:

div {
    position: absolute;
    bottom: 0px;
}

通过一些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的广泛支持，这似乎是一个非常可靠的解决方案。

到目前为止，Stu的答案是最接近工作的，但它仍然没有考虑到外部div的高度可能会根据文本在其中的换行方式而改变的事实。因此，只重新定位内部div(通过改变“pipe”的高度)一次是不够的。这种改变必须发生在循环内部，因此您可以不断检查是否已经达到了正确的定位，并在需要时进行重新调整。

前面答案中的CSS仍然完全有效:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

然而，Javascript应该看起来更像这样:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}