使用CSS浮动结合百分比宽度可创建响应式侧边栏布局。1. 侧边栏设width: 25%、float: left；2. 主内容区设width: 75%、float: left；3. 父容器设overflow: hidden清除浮动；4. 屏幕小于768px时，宽度均改为100%，实现垂直堆叠；该方法兼容旧浏览器但易错位，现代项目建议用Flexbox或Grid。
使用CSS浮动（float）结合百分比宽度可以创建一个基础的响应式侧边栏布局。这种方法虽然不如Flexbox或Grid现代，但在兼容老版本浏览器时仍有实用价值。关键是通过设置容器为百分比宽度，让布局随屏幕尺寸变化自动调整。
基本结构与浮动设置
页面通常包含一个侧边栏和一个主内容区。给这两个区域分别设置float: left，并用百分比定义宽度，使它们能在不同设备上自适应。
例如：
这样两者会在同一行并排显示，总宽度为100%，适配父容器。
立即学习“前端免费学习笔记（深入）”；
响应式断点处理
当屏幕变窄时，并排布局可能不再合适。可通过媒体查询在小屏幕上调整布局。
比如在屏幕宽度小于768px时：
- 将侧边栏和主内容区的宽度改为100%
- 仍保留float: left，但此时会垂直堆叠
- 可进一步隐藏侧边栏或改为折叠菜单提升移动端体验
注意事项与局限性
浮动布局容易受内容高度不一致影响，可能出现错位。建议始终为浮动元素设置明确的高度或使用overflow: hidden闭合浮动。
另外，现代开发更推荐使用Flexbox或CSS Grid实现响应式布局，代码更简洁且维护性强。但在需要支持IE8/9等旧浏览器时，浮动+百分比仍是可行方案。
基本上就这些，掌握好浮动原理和百分比计算，就能做出简单有效的响应式侧边栏。
