Отключить перенос текста вокруг плавающих изображений

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>

Это немного чище в моем мире: -)

Answer 2

Вы должны вставить еще один div после вашего div-изображения, который очищает два числа с плавающей точкой ... вот так:

<div>
   <!-- Your images go here -->
</div>
<div style="clear: both;"></div>
<p>your text</p>

Редактировать: См. Мой комментарий, в чем будет преимущество размещения очищающего div внутри div, оборачивающего изображения.

Answer 3

Очистка div, содержащего плавающие объекты, не будет работать.

Попробуйте поместить это между вашими изображениями div и текстовым контейнером div:

<div class="clear"></div>

И определить класс clear следующим образом:

.clear { clear:both; }

_{P.S. После того, как я получил второе голосование по этому вопросу и до того, как я получил комментарий, противоречащий моему ответу: очистка div должна работать, но, по моему опыту, это не так; в очень чистом HTML есть несколько случаев, когда я могу сказать, что это так, но в целом, и я не знаю, было ли это связано с определенной техникой, которую дизайнеры использовали в прошлом, нам пришлось разобраться с автономный div после контейнера.}