响应式浮动布局通过百分比宽度和媒体查询实现自适应，如两栏布局中.left设70%、.right设30%，配合box-sizing:border-box避免padding影响；在屏幕小于768px时，通过@media将两栏改为width:100%并堆叠显示；为防止父容器塌陷，推荐使用::after伪元素clear:both清除浮动，该方法语义清晰且兼容性好。
响应式浮动布局是早期实现网页自适应的重要手段，虽然现代开发更多使用 Flexbox 或 Grid，但在维护旧项目或特定场景下，掌握基于 float 的响应式布局依然有价值。通过结合百分比宽度和媒体查询，可以让元素在不同屏幕尺寸下合理排列。
使用百分比设置浮动元素宽度
为了让浮动元素在不同设备上自动调整大小，应避免使用固定像素值，改用百分比定义宽度。
例如，一个两栏布局可以这样写：
.container {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.left, .right {
float: left;
height: 300px;
}
.left {
width: 70%;
background-color: #eee;
}
.right {
width: 30%;
background-color: #ccc;
}
这样左右两栏会随容器缩放而等比缩放，保持整体布局不被破坏。注意添加 box-sizing: border-box 可避免 padding 影响布局计算。
立即学习“前端免费学习笔记（深入）”；
利用媒体查询调整断点
当屏幕过小时，多列并排可能变得难以阅读或溢出。通过媒体查询可以在特定宽度下重设布局。
比如在小屏幕上让右侧栏换行显示：
@media (max-width: 768px) {
.left, .right {
width: 100%;
}
}
此时两个元素都会独占一行，形成垂直堆叠结构，更适合手机浏览。你也可以在这个断点中取消浮动，避免清除浮动带来的麻烦。
清除浮动与容器塌陷问题
由于浮动元素脱离文档流，父容器容易出现高度塌陷。常用解决方法包括：
- 给父容器添加 overflow: hidden
- 使用伪类清除：::after { content: ""; display: table; clear: both; }
推荐使用伪类方式，语义清晰且不影响其他样式表现。
基本上就这些。float 配合百分比和 media query 能实现基础响应式效果，虽不如现代布局灵活，但在简单场景中仍够用。关键是控制好百分比分配，并在关键断点调整结构，确保内容可读性不受影响。
