使用CSS浮动可实现兼容旧浏览器的弹性网格布局。1. 通过float:left和width百分比创建等宽列，如三列各33.33%；2. 结合box-sizing:border-box和负margin解决间距导致的换行问题；3. 利用媒体查询实现响应式，不同屏幕宽度下调整列数；4. 使用overflow:hidden或::after伪元素清除浮动，防止父容器高度塌陷。该方法虽不如Flexbox或Grid现代，但对维护老项目和理解CSS布局机制仍有价值。
用 CSS 浮动实现弹性网格布局虽然不如 Flexbox 或 Grid 现代，但在一些需要兼容旧浏览器的场景中仍具实用价值。核心思路是结合 float、width 百分比和 margin 来模拟网格结构。
基本浮动网格结构
通过设置容器宽度为 100%，子项使用百分比宽度并左浮动，可以创建多列等宽网格。
例如，实现一个三列网格：
.grid-container {
width: 100%;
overflow: hidden; /* 清除浮动影响 */
}
.grid-item {
float: left;
width: 33.33%; / 三列均分 /
box-sizing: border-box;
padding: 10px;
}
这样每个项目占据约三分之一宽度，并从左到右排列。
立即学习“前端免费学习笔记（深入）”；
处理间距与边距塌陷
直接加 margin 可能导致换行错位，因为总宽度超过 100%。解决方法有两种：
- 使用 box-sizing: border-box 包含 padding 和 border 在 width 内计算
- 在容器上设置负 margin 抵消子项外边距
.grid-container {
margin-left: -10px;
margin-right: -10px;
}
.grid-item {
float: left;
width: 33.33%;
padding: 10px;
box-sizing: border-box;
margin-bottom: 20px;
}
响应式适配
配合媒体查询可让网格在不同屏幕下自动调整列数。
@media (max-width: 768px) {
.grid-item {
width: 50%; /* 平板下两列 */
}
}
@media (max-width: 480px) {
.grid-item {
width: 100%; / 手机下单列 /
}
}
这样就能实现基础的“弹性”效果，根据视口动态改变布局形态。
清除浮动与容器高度塌陷
浮动元素脱离文档流，父容器可能高度为零。常用解决方案：
- 给容器添加 overflow: hidden
- 使用伪类清除浮动
.grid-container::after {
content: "";
display: table;
clear: both;
}
确保布局结构完整，避免后续元素错位。
基本上就这些。虽然浮动做网格略显过时，理解它有助于维护老项目，也能加深对 CSS 布局机制的理解。
