Html CSS元素忽略填充中的图像

所以，我有一个带有css的网页，其中一个元素有图像和文本。图像向左对齐，并延伸超过父元素的填充

父元素尊重文本，并随着更多文本的添加而扩展，但它允许图像通过而不扩展

这就是它看起来的样子：

---

这就是我想要的：

---

基本上，我希望content元素不仅可以用文本扩展，还可以用元素扩展。最后，资料来源： -CSS

---

-HTML

为了清晰起见，我将使用内联样式，但更改为以下内容：

<div id="content">
  <h1>Books</h1>
  <img src='images/vol1.jpg' style='float:left;' width='300px'/>
  <p>text text text text text text text</p><div style='clear:both'/><hr/><br>
</div>

书
文本文本

是您想要扩展平面背景色的图像，还是实际上是您想要有条件地裁剪其高度的图像？如果没有代码，则需要阅读如何修复它。@JoshC刚刚用pastebin上传了两者。很抱歉没有先这么做。。。我无意中单击了“提交”。@Ryan我想扩展内容元素，这样图像就不会过时。谢谢你的回答。我更喜欢单独的css文档，但我将来提问时会转换为内联。实际上，在提问时将HTML与css分离是很好的。我只是不想费心为一些小东西做小提琴。祝你好运一切都好！我一直在使用clear:with
，并且效果很好。再次感谢您的快速回复！