如何防止DIV重叠右浮动图像？

Question

我有一张包含两张图片和一些文字的文件。第一张图像向左浮动，第二张图像向右浮动。

问题是来自DIV的文本与第二张图像重叠。文本“第二个图像后的第一个DIV ”应放在第一个图像下方和第二个图像的左侧（因为它位于第二个IMG标签之后）。我错过了什么？

小提琴：http://jsfiddle.net/yLUnC/4/

HTML：

<div class="wrapper">
    <div>DIV before first image</div>
    <img class="floatLeft" src="http://placehold.it/200x100&text=First+image">
    <div>DIV after first, before second</div>
    <img class="floatRight" src="http://placehold.it/200x100&text=Second+image">
    <div>First DIV after second image</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text overlapping second image, not good</div>
    <div>last DIV</div>
</div>

Answer 1

您需要提供所有子元素display:inline并提供其他特殊元素display: block。最重要的是将overflow: auto赋予父元素，以便计算浮动子元素的高度（例如第二个图像）。

以下是working fiddle

<强>更新：

由于您没有为这些元素分配任何类，我正在为这些特殊元素添加内联样式。

Updated Fiddle （根据需要进行更改）