禁用浮动图像周围的文本环绕

Question

我有一个看起来像这样的页面:

<div>
<p> This text appears above the image</p>
<!-- I know the <div><p> construction is superfluous. I was just trying things out -->
</div>

<div style="display: block; width: 100%; clear: both;">

   <img class="left" alt="Img1" src="img1.jpg" alt="" width="242" height="181" />
   <img class="right" alt="Img2" src="img2.jpg" alt="" width="242" height="181" />

</div>

<div>
<p> This text appears between those images. I want it to display below them.</p>
</div>

每个图像都有这个CSS:

.left {
   float: left;
   margin-right: 5px;
}
.right {
   float: right;
   margin-left: 5px;
}

我怎样才能使这两个图像彼此相邻,但文本不会包裹在这些图像之间？

当前页面的ASCII艺术:

my text my text my text my textmy text
my text my text my textmy text my text

--------- text is wrapping ---------
|  IMG  | text is wrapping |  IMG  |
--------- text is wrapping --------- 

my text my text my text my textmy text
my text my text my textmy text my text

我想要的美丽的ASCII艺术:

my text my text my text my textmy text
my text my text my textmy text my text

---------                  ---------
|  IMG  |                  |  IMG  |
---------                  --------- 

text is wrapping text is wrapping text
is wrapping

my text my text my text my textmy text
my text my text my textmy text my text

Answer 1

我会推荐这个:

<div style="overflow: hidden; width: 100%;">
    <!-- floated images -->
</div>

它在我的世界有点清洁:-)