Cleaning nested floats

Question

I am creating a tiled image grid similar to a gallery of images with a thumbnail grid, and I need the images to wrap in the next line after three images. So I float a bunch of divs, each of which contains an image, and then clear the float manually after three images.

The problem is that I am working in a rather confusing existing template that already uses float to organize everything. Clearing the float in my grid scrambles the entire page, apparently because it clears every float on the page so far. What can I do?

I clear the float by adding an empty div. i.e:

<div style='clear:right'>

Can one of the other methods of cleaning floats work better?

Answer 1

• div ( )
• div - 3 .
• - .
• div ": ", .

:

<style>

div#container {  
  overflow: hidden; 
  width: 300px; 
}

div#container img { 
  float: left; 
  width: 100px; 
}

</style>

<div id="container"> 

  <img src="" />
  <img src="" />
  <img src="" />


  <img src="" />
  <img src="" />
  <img src="" />


  <img src="" />
  <img src="" />
  <img src="" />

</div>

Answer 2

:

div
 img
 img
 img
 row break
 img
 img
 img
 ...

:

<br class="clear" />

:

div
 div
  img
  img
  img
 div
  img
  img
  img
 ...

.. .clear DIVs.

:

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

, .

Answer 3

IE >= 8 , display: table float. , .

http://www.quirksmode.org/css/display.html#table

Answer 4

display: inline-block; , . HTML :

<style>
.figure {
    display: inline-block;
}
</style>

<div class="figure">
    <img src="littlepony.jpg" alt="My cute little pony" width="13" height="37" />
</div>

, IE6, IE7 Firefox 2:

• IE 6 7 , hasLayout, , , :

<!--[if lte IE 7]>
.figure {
    display: inline;
    zoom: 1; /* triggering hasLayout */
}
<![endif]-->

• Firefox 2 display: inline-block;, :

.figure {
    display: -moz-inline-stack;
    display: inline-block;
}

• Firefox 2 . -, .figure, ... . , , div div.figure img + p

    <div>
        <img src="littlepony.jpg" alt="Photo of my cute little pony" width="13" height="37" />
        <p>Second child of .figure>div and not .figure</div>
    </div>
</div>

- ( Fx2) , -moz-inline-stack'ed , . , div :

    .figure div {
        position: relative;
    }

, IE6/7 CSS, .

, , , . td no th. , :

• IE6 7 display: table-sth
• your CMS is causing problems that otherwise works fine on another site.
• Firefox 3 support inline-blockdoesn't help

than yes, it’s better for everyone that you use a table, not a half solution, causing problems for half of your users;)