每次我尝试在CSS中执行看似简单的操作时，它都不起作用。
我有一个包含460x160图片的内容div。我要做的就是将图像放置在右下角，然后将文字环绕起来。
<div id="contents"> <img src="..." /> text text text text text text ... </div>
所以我希望它看起来像：
------------------ | text text text | | text text text | | text text -----| | text text | | ------------------
用左上或右上的图像来做是蛋糕：
#contents img { float:right; } ------------------ | text text | | | text text -----| | text text text | | text text text | ------------------
现在我如何将其推到最低点？到目前为止，我想出的最好的方法是：
#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px ------------------ | text text | | text text | | text text -----| | text text | | ------------------
在这种情况下，文本不会在空白处打印，因此图像上方有空白。
#contents { position:relative; } #contents img { position:absolute; right:0; bottom:0; } -or- // move the img tag under the text in the html and: #contents img { float:right; margin-top:-160; } ------------------ | text text text | | text text text | | text text -----| | text text | te | ------------------
在这种情况下，文本将打印在图像上方或下方。
那么…我该怎么做呢？
方法是将浮动元素放在文本中间的某个位置。不可能一直做到完美。
或者这个：
它包括浮动一个垂直的“pusher”元素（例如img，但是只使用一个空的div可能更聪明），然后使用clear属性将所需的对象浮动在其下。这种方法的主要问题是您仍然必须知道文本有多少行。不过，它使事情变得更加容易，并且可以使用javascript进行编码，只需要将“推子”的高度更改为容器的高度减去浮子的高度即可（假设您的容器不是固定的/最小高度） 。
无论如何，如本线程中所讨论的，没有简单的解决方案…
通过了解浮子和法线流之间的相互关系，以及了解如何使用清除来操纵浮子周围的法线流，作者可以将浮子用作非常强大的布局工具。 由于最初并不打算将浮点数用于布局，因此可能需要进行一些修改才能使其表现出预期的效果。这可能涉及包含浮点的浮点元素，“清除”元素或两者的组合。
我需要使图像向右对齐，并且距顶部正好170px。并且需要文本在图像的顶部，左侧和底部流动。所以我要做的是创建一个宽度为0px，高度为170px并向右浮动的。然后img将浮动并清除正确，瞧！
<!-- I used CSS, but inline will serve well here --> <div style="float: right; width: 0px; height: 170px"></div> <div style="float: right; clear: right"><img src="..." /></div> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
