1. 基本概念

浮动布局是CSS中的一种定位机制，允许元素在其容器内水平或垂直浮动。使用浮动可以创建灵活的布局，使元素可以在容器内自由流动。

2. 实现步骤

2.1 HTML结构

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>

2.2 CSS样式

.image-container {
  width: 100%; /* 容器宽度 */
  overflow: hidden; /* 隐藏溢出的内容 */
}

.image-container img {
  float: left; /* 图片向左浮动 */
  width: 200px; /* 图片宽度 */
  margin-right: 10px; /* 图片之间的间距 */
}

2.3 完善布局

.image-container img {
  float: left;
  width: calc((100% - 10px) / 3); /* 计算图片宽度，3为图片数量 */
  margin-right: calc((100% - 10px) / 3); /* 计算图片间距 */
  margin-right: 0; /* 最后一张图片不设置右边距 */
}

2.4 响应式设计

@media screen and (max-width: 600px) {
  .image-container img {
    width: calc(100% - 10px); /* 屏幕宽度小于600px时，图片宽度为100% */
    margin-right: 0; /* 移除图片间距 */
  }
}

3. 总结