If you're okay with only the bottom-most line of the text going to the side of the block (as opposed to completely around and underneath it, which you can't do without ending the block and starting a new one), it's not impossible to float a block to one of the bottom corners of a parent block. If you put some content in a paragraph tag within a block and want to float a link to the bottom right corner of the block, put the link within the paragraph block and set it to float: right, then put in a div tag with clear: both set just underneath the end of the paragraph tag. The last div is to make sure the parent tag surrounds the floated tags.

<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>

以下是我的解决方案:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

您可以尝试使用宽度为1px的空元素并将其浮动。然后清除您实际想要定位的元素，并使用空元素的高度来控制它向下移动的距离。

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}

试试这个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>

如果你需要相对对齐和DIV仍然不能给你你想要的，只是使用表格和设置valign = "bottom"在单元格你想要的内容对齐到底部。我知道这不是对你的问题的一个很好的回答，因为DIV应该取代表，但这是我最近对一个图像标题所做的，到目前为止它工作得完美无缺。

我知道这是一个非常古老的话题，但我仍然想回答。如果有人遵循下面的css和html，然后它的工作。子页脚div会像胶水一样粘在底部。

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>