我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
简单……在HTML文件....将“footer”(或你想要在底部的div)放在底部。所以不要这样做:
<div id="container">
<div id="Header"></div>
<div id="Footer"></div>
<div id="Content"></div>
<div id="Sidebar"></div>
</div>
这样做:(把页脚放在下面。)
<div id="container">
<div id="Header"></div>
<div id="Content"></div>
<div id="Sidebar"></div>
<div id="Footer"></div>
</div>
这样做之后，你可以打开css文件，让“边栏”浮动到左边。然后将content浮动到右边，然后将footer清除。
这应该有用。对我来说是这样。
其他回答
我知道这些东西很旧了，但我最近遇到了这个问题。
使用绝对位置跳水的建议是非常愚蠢的，因为整个浮动的东西失去了绝对位置。
现在，我没有找到一个通用的解决方案，但在很多情况下，人们使用浮动div只是为了在一行中显示一些东西，比如一系列的span元素。你不能垂直对齐。
为了达到类似的效果，你可以这样做:不让div浮动，但设置它的display属性为inline-block。然后你可以按照自己的喜好垂直排列。你只需要设置父div属性vertical-align为顶部，底部，中间或基线
我希望这能帮助到一些人
我已经在JQuery中实现了这一点，通过将一个零宽度的支柱元素放在浮动的右边，然后根据父高度减去浮动的子高度调整支柱(或管道)的大小。
在js开始之前，我使用的是绝对位置的方法，它可以工作，但允许文本流在后面。因此，我切换到静态位置以启用支柱方法。 (header是父元素，cutout是我想要的右下角，pipe是我的strut)
$("header .pipe").each(function(){
$(this).next(".cutout").css("position","static");
$(this).height($(this).parent().height()-$(this).next(".cutout").height());
});
CSS
header{
position: relative;
}
header img.cutout{
float:right;
position:absolute;
bottom:0;
right:0;
clear:right
}
header .pipe{
width:0px;
float:right
}
管道必须排在第一位，然后是切口，然后是HTML中的文本。
很长一段时间以来，我也一直在寻找这个解决方案。 这是我得到的结果:
align-self: flex-end;
链接:https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 但是，我不记得我是从哪里打开这个链接的。希望能有所帮助
使用css的margin-top属性，目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。
<div class="container" style="margin-top: 700px; text-align-last: center; ">
<p>My footer Here</p>
</div>
通过一些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的广泛支持，这似乎是一个非常可靠的解决方案。
