清除嵌套浮动

Question

我正在创建一个平铺的图像网格,就像一个带有缩略图网格的图像库,我需要将图像包裹在3个图像之后的下一行.所以我浮动了一堆div,每个div包含一个图像,然后在三个图像后手动清除浮动.

问题是我在一个相当复杂的现有模板中工作,该模板已经使用float来安排所有事情.清除网格中的浮动会扰乱整个页面,大概是因为它清除了页面中的每个浮点数.我能做什么？

我正在通过插入一个空白div清除浮动.即:

<div style='clear:right'>

清除浮动的其他方法之一可能更好吗？

Answer 1

1. 创建一个合适的容器div(如果你还没有)
2. 在容器div上设置限制宽度 - 相当于3个图像占用的宽度.
3. 允许所有图像浮动 - 它们将自动换行.
4. 使用'overflow:hidden'设置容器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类应用到你的内部 DIV 中。

无论哪种方式，都将其添加到您的样式表中：

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

您可以将此类用于包含浮动的所有其他元素。