使用float配合媒体查询可实现响应式换行，通过调整子元素宽度控制排列，大屏三列、中屏两列、小屏单列；现代浏览器推荐flex布局，flex-wrap:wrap自动换行，flex:1 1 300px自适应缩放，结合@supports为旧浏览器提供float回退，兼顾兼容性与维护性。
浮动元素在响应式布局中实现换行，关键在于结合传统浮动（float）与现代布局技术，确保在不同屏幕尺寸下都能正确排列和换行。虽然 float 本身不支持自动换行控制，但通过媒体查询（media query）调整容器宽度或清除浮动，再配合 flex 作为 fallback 方案，可以实现稳定且兼容的响应式效果。
使用 Float + Media Query 控制换行
在只使用 float 的旧式布局中，多个浮动元素默认在同一行排列，直到父容器放不下时自动换行。通过媒体查询可以动态控制子元素的宽度，从而影响其换行行为。
示例：
.container {
overflow: hidden; /* 清除浮动 */
}
.box {
float: left;
width: 30%;
margin: 1.5%;
}
@media (max-width: 768px) {
.box {
width: 46%;
margin: 2%;
}
}
@media (max-width: 480px) {
.box {
width: 100%;
margin: 0 0 10px 0;
}
}
说明：大屏下每行显示三列，中屏改为两列，小屏强制单列显示，实现“换行”效果。注意在最小屏幕上将 margin 调整并清除浮动间隙，避免错位。
Flex 作为现代 fallback 提升兼容性
对于支持 Flexbox 的浏览器，应优先使用 display: flex 实现更自然的换行布局。通过 flex-wrap: wrap 允许子项换行，同时设置 flex 缩放比例，无需手动计算宽度。
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.box {
flex: 1 1 300px; /* 最小宽度约 300px，可伸缩 */
}
这种方式无需媒体查询即可实现自适应换行，在空间不足时自动换行，更加灵活。
渐进增强：Float 回退方案写法
如果需要兼容非常旧的浏览器（如 IE8-9），可采用渐进增强策略：先写 float 布局作为基础，再用 @supports 或现代浏览器识别能力启用 flex。
.container {
overflow: hidden;
}
.box {
float: left;
width: 33.33%;
margin: 1%;
}
<p>@supports (display: flex) {
.container {
display: flex;
flex-wrap: wrap;
gap: 1%;
overflow: visible;
}
.box {
float: none;
flex: 1 1 300px;
width: auto;
margin: 0;
}
}</p>这样现代浏览器会使用更优的 flex 布局，而老浏览器继续使用 float 方案，保证基本展示。
基本上就这些。使用 float 配合 media query 可以控制响应式换行，但推荐优先采用 flex + flex-wrap 实现更简洁可靠的布局，再为老旧环境提供 float 回退。结构清晰、维护简单，适配性更强。
