通过结合CSS媒体查询与浮动布局，可在不同屏幕尺寸下灵活调整元素排列方式。大屏使用多列浮动布局，小屏则取消浮动改为块级堆叠，并利用百分比宽度、box-sizing和clearfix等技术确保响应式稳定性，适配多设备显示需求。
浮动元素在响应式设计中需要根据屏幕尺寸调整布局，单纯使用 float 已无法满足多设备适配需求。通过结合 CSS 媒体查询，可以灵活控制不同屏幕宽度下浮动元素的排列方式、宽度和显示效果，实现良好的响应式表现。
使用媒体查询控制浮动行为
媒体查询允许根据设备特性（如视口宽度）应用不同的样式规则。针对浮动元素，可以在大屏保持多列浮动布局，在小屏取消浮动或改为块级堆叠。
例如：
.container { width: 100%; }
.box {
float: left;
width: 30%;
margin: 1.66%;
}
<p>/<em> 屏幕大于768px时，三栏浮动布局 </em>/
@media (min-width: 768px) {
.box { float: left; }
}</p><p>/<em> 屏幕小于768px时，取消浮动，块状堆叠 </em>/
@media (max-width: 767px) {
.box {
float: none;
width: auto;
margin: 10px auto;
display: block;
}
}</p>清除浮动与响应式容器适配
浮动可能导致父容器高度塌陷，在响应式场景中更需注意结构稳定。推荐使用现代清除方法确保布局正常。
立即学习“前端免费学习笔记（深入）”；
常用做法包括：
.clearfix::after {
content: "";
display: table;
clear: both;
}
配合百分比宽度提升弹性
为使浮动元素更好适应不同屏幕，应避免固定像素宽度，改用百分比设置尺寸。
关键点：
- 子元素宽度使用 %，留出 margin 空隙
- 结合 max-width 控制最大尺寸，防止桌面端过宽
- 设置 box-sizing: border-box 避免 padding 影响布局计算
.box {
float: left;
width: 46%;
margin: 2%;
padding: 10px;
box-sizing: border-box;
}
基本上就这些。虽然现代布局更多采用 Flexbox 或 Grid，但在维护旧项目或轻量场景中，浮动加媒体查询仍是可行的响应式方案。关键是根据断点合理切换布局模式，保证内容可读性和结构完整性。
