我曾经多次使用 float:right （或left）将图像和嵌入框浮动在容器顶部。现在，我需要将一个 div 浮动到另一个 div 的右下角，并使用 float 正常的文本环绕效果（只有上方和左侧文本环绕）。
我认为这应该相对容易，尽管 float 没有 bottom 值，但是我使用了许多技术，搜索网络也没有找到其他方法，除了使用绝对定位，但这不会给出正确的文字换行行为。
我原以为这是非常普遍的设计，但显然不是这样。如果没有人有建议，我将不得不将文本分成单独的框，并手动对齐 div，但这相当不稳定，我不想在每个需要它的页面上都这样做。
将父级
position:relative，然后将内部position: absolute;
bottom: 0;
...然后你就做到了 :)
使它正常工作的方法如下:
使用
rotate(180deg)旋转父级div 180度
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
JSFiddle: http://jsfiddle.net/wcneY/
现在旋转所有向左浮动的元素（给它们添加一个类）180度使它们再次变直。大功告成！它们会浮到底部。
经过几天的尝试，我不得不说这似乎是不可能的，即使使用JavaScript（我不想这样做）也看起来不可能。
为了澄清那些可能不理解的人-这就是我要找的：在出版中，通常会布置一个插图、表格、图形等插图，以便其底部与块或页面的最后一行文本底部对齐，在插图上方和右侧或左侧流动自然的文本。在HTML/CSS中，使用float样式轻而易举地将插图的顶部与块的顶部对齐，但令我惊讶的是，尽管这是一项常见的布局任务，却似乎无法将文本和插图的底部对齐。
除非有人有最后一分钟的建议，否则我想我将不得不重新考虑这个项目的设计目标。
我在jQuery中通过在浮动元素上方放置一个零宽度支撑元素，然后根据父元素高度减去浮动子元素的高度来调整支撑元素（或管道）的大小，来实现此目标。
在JavaScript启动之前，我使用绝对定位方法，这种方法有效，但允许文字流穿过。因此，我切换到静态定位，以启用支撑元素方法。（标题是父元素，cutout是我想要的右下角元素，管道是我的支撑元素）
$("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的顺序放置文本。
这将在页面底部放置一个固定的div，当您向下滚动时会固定在底部
#div {
left: 0;
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}
position:relative; 然后在子div上设置以下CSS属性：position:absolute; bottom:0;#outer {
width:10em;
height:10em;
background-color:blue;
position:relative;
}
#inner {
position:absolute;
bottom:0;
background-color:white;
}<div id="outer">
<div id="inner">
<h1>done</h1>
</div>
</div>
align-self: flex-end 将沿着交叉轴对齐。.container {
display: flex;
}
.bottom {
align-self: flex-end;
}
<div class="container">
<div class="bottom">Bottom of the container</div>
</div>
输出：
.container {
display: flex;
/* Material design shadow */
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
height: 100px;
width: 175px;
padding: 10px;
background: #fff;
font-family: Roboto;
}
.bottom {
align-self: flex-end;
}<div class="container">
<div class="bottom">Bottom of the container</div>
</div>我也长期在寻找这个解决方案。 这就是我得到的：
align-self: flex-end;
链接：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 然而，我不记得我从哪里打开了这个链接。希望它有所帮助。
如果你只希望文本的最底部一行位于块的侧面（而不是完全围绕和在其下方，这是无法做到的，除非结束该块并开始一个新块），那么将块浮动到父块的一个底角并不是不可能的。如果你在块内放置一些内容，并希望将链接浮动到块的右下角，请将链接放置在段落块中，并将其设置为 float: right，然后在段落标签的结尾处放置一个 clear: both 设置的 div 标签。最后一个 div 是为了确保父标签包围浮动标签。
<div class="article" style="display: block;">
<h3>title</h3>
<p>
text content
<a href="#" style="display: block;float: right;">Read More</a>
</p>
<div style="clear: both;"></div>
</div>