css - 清除嵌套的 float

Question

我正在创建一个平铺的图像网格，就像一个带有缩略图网格的图片库，我需要图像在 3 张图像之后换行到下一行。所以我 float 了一堆 div，每个都包含一个图像，然后在三个图像之后手动清除 float 。

问题是我在一个相当复杂的现有模板中工作，该模板已经使用 float 来安排所有内容。清除我的网格中的 float 会扰乱整个页面，大概是因为它正在清除页面中的每个 float 。我能做什么？

我通过插入空白 div 来清除 float 。即:

<div style='clear:right'>

清除 float 的其他方法是否更有效？

Answer 1

1. 创建一个合适的容器 div(如果你还没有)
2. 设置限制宽度容器 div - 相同这 3 张图片占满了。
3. 允许所有图像 float - 它们会自动换行。
4. 设置容器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>