Disable text wrapping around floating images

问题

I have a page which looks like this:

<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>

Each image has this CSS:

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

How can I make it so that those two images float next to each other, but text does not wrap in between those images?

ASCII art of the current page:

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

Beautiful ASCII art of what I desire:

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

回答1:

I would recommend this:

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

Its a bit cleaner in my world :-)

回答2:

You have to insert another div after your image-div, which clears the two floats... like this:

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

Edit: See my comment, what would be the advantage of placing the clearing div inside the div wrapping the images.

回答3:

Clearing the div containing floating objects won't work.

Try placing this between your images div and the text container div:

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

And define the clear class as so:

.clear { clear:both; }

_{P.S After getting a second up-vote on this and before I eventually get the comment stating contrary to my answer: clearing the containing div should work, but just in my experience doesn't; there are a few cases in very clean HTML where I can say it did, but in general, and I don't know if this was to do with a particular technique designers have used in the past, we've had to clear with a standalone div after the container.}

来源：https://stackoverflow.com/questions/5612997/disable-text-wrapping-around-floating-images

标签

css

css-float