塊元素的背景圖像後面浮動元素

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/

是不是這樣，還是我誤解？