块元素的背景图像后面浮动元素

Question

我有一个浮动元素前面的块元素背景图像的一个小问题。

我将图像浮动到左侧，然后是H1。正如预期的那样，H1（这是一个blocl级元素）在图像后面流动，但它的内容（实际标题）出现在图像的右侧。

不幸的是，我在H1上使用的背景图像必须与左侧对齐，因此出现在实际img后面，因为与内容不同，这不会被浮动行为推动。

例子：

http://jsfiddle.net/WwuqG/

（我设置第二个标题clear: left显示它应该是什么样子）。

一种解决方法是将标题的左边距设置为比浮动图像的宽度略大一点，但这需要我事先知道它的宽度。

另一种方法是在h1中的元素中添加标题的图标，但这在语义上不正确。

是否有更好的仅用于CSS的解决方案不需要额外的元素？

Answer 1

添加overflow:hidden到h1

新fiddle

Answer 2

我有些困惑。

如果我做你的建议：

设置标题的左缘的 略高于浮动图像的 宽度

它看起来像这样：http://jsfiddle.net/WwuqG/1/

我的困惑来自于你的问题似乎......很容易解决。

• 同时添加float: left到<h1>：http://jsfiddle.net/WwuqG/2/

这适用于任何width图像：http://jsfiddle.net/WwuqG/3/

是不是这样，还是我误解？