Html firefox中奇怪的浮点行为

首先，可能已经有这样一个问题了，但我一生都找不到这样一个问题，所以如果有，就不要问我。请告诉我怎么走

css浮动在firefox中表现得很奇怪，但在其他浏览器中没有。我需要将新闻提要中的图像向左浮动，以便它旁边的文本位于图像顶部而不是底部。当图像在firefox中浮动时，内部气泡不清除图像，外部气泡不清除任何图像

以下是css：

#news {width:99.2%; background-color:#E9F7FE; border-radius:0.2em; padding:5px; position:relative; margin-bottom:10px}
.picture {width:70px;overflow:hidden; margin-right:5px; border-radius:0.2em; display:inline-block; float:left;}
.bubble {float:left; padding:5px;border-radius:0.2em; background-color:#E9F7FE; margin-bottom:5px; margin-right:10px; width:33.3%; margin-bottom:10px; }
.innerbubble {position:relative; background-color:white; border-radius:0.2em; padding:5px;}
#probwarn {border-radius:0.2em; background-color:#E9F7FE; text-align:center; margin-top:5px; width:100%; margin-bottom:5px; float:right;}

以及标记：

最新消息：

---

很抱歉，标记有点难以阅读，并且格式不好。它是用PHP编写的，所以有点奇怪。

你可以简化HTML和CSS，这将使你的生活更轻松，我为你创建了一个提琴，并在这里这样做：

如果我理解你的要求，

hr{clear:两者；}

应该可以解决你的问题。这将导致

始终覆盖整个页面，位于浮动图像的下方，这将向下推动其他所有内容，使图像不会彼此相邻浮动（但文本仍显示在相应图像的顶部）

jsFiddle：

---

hr{clear:left；}

实际上足以解决所描述的特定问题，但似乎适合将

从两个方向清除。

请做一个提示。。。。老实说，你问什么还不太清楚。你能试着重新表述你的问题吗？谢谢。我的工作方式从来都不整洁或简单，但我是唯一一个正常阅读我的代码的人。我还没有测试过这个，但我相信它会起作用。没想到会这样谢谢你。我希望清除hr不会影响其他页面的布局。如果是这样的话，我会做一个简单的决定。谢谢

<h1>Latest News:</h1>

<div class="innerbubble">

<a href="index.html"><div class="picture"><img src=" 
 http://newbornsounds.co.uk/artistspictures/Not%20by%20design/Andy%20Evans%20logo%205.jpg" width="100%"  alt="NewBorn Sounds" >

</div>

News: Not By Design<br></a>

<hr>

<div class="picture"><img src=" 
  ../imageuploads/13396991365_277695398952342_104081122980438_707146_2014948057_n.jpg" width="100%"  alt="NewBorn Sounds" >

</div>

<a href="JacobWindsor">New Artist: Jacob Windsor<br></a><hr><a href="JacobWindsor/gigs">

<div class="picture"><img src="     ../imageuploads/13396991365_277695398952342_104081122980438_707146_2014948057_n.jpg"     width="100%"  alt="NewBorn Sounds" >

</div>

New Gig: a from Jacob Windsor</a><br><hr></div></div>