纯 float 布局侧边栏收缩后内容区不自适应，须让主内容区触发 bfc（如 overflow: hidden），同步清除侧边栏的 width、padding、border、margin，并在 @media 中将主区 width 设为 100% 或移除 margin-left。
浮动布局里侧边栏收缩后内容区不自适应怎么办
直接说结论：纯 float 布局 + width 百分比 + @media 是可行的，但必须确保内容区用 overflow: hidden 或 display: block 触发 BFC，否则收缩侧边栏后内容会“跑上去”盖住它。
常见错误现象是：小屏下侧边栏 width: 0 了，但主内容区没撑满，还留着原来给侧边栏让出的空白；或者内容直接叠在侧边栏上——本质是浮动未被清除，文档流没重排。
- 侧边栏用
float: left，主内容区用overflow: hidden（最稳妥），别依赖margin-left硬推 -
@media中改侧边栏width时，同步改主内容区width或删掉固定margin-left - 如果用了
calc(100% - 200px)这类计算值，小屏收缩时记得改成100%，否则负宽度或溢出
用@media收缩侧边栏时，为什么隐藏后仍有占位
因为 visibility: hidden 或 opacity: 0 不影响文档流，侧边栏还在“占位置”；而 display: none 虽然彻底移除，但会破坏浮动上下文，导致主内容区突然左移、错位。
真正可用的是：width: 0 + overflow: hidden + padding: 0 + border: none，再配合 transition 平滑收起。注意：不能只设 width: 0 就完事，否则内边距和边框还在撑开空间。
立即学习“前端免费学习笔记（深入）”；
- 必须清空
padding、border、margin（尤其margin-right可能干扰主区） - 加
white-space: nowrap防文字换行撑高，再配text-overflow: ellipsis更干净 - 如果侧边栏有子元素用
position: absolute，它们不会随width: 0消失，得额外控制
浮动侧边栏响应式收缩的兼容性坑
IE8+ 支持 float 和 @media，但 IE9 以下不支持 calc()；iOS Safari 6.1 之前对 transition 宽度变化有渲染延迟。这些不是理论问题，是真实线上会闪一下或卡住。
性能上，频繁触发 width 变化会引发重排（reflow），尤其侧边栏含大量 DOM 节点时。别用 left/transform 模拟收缩——那已脱离浮动本意，且 transform 在某些安卓 WebView 里缩到 0 后点击区域仍存在。
- 避免在
@media里写太多嵌套规则，老浏览器解析慢，可能漏掉关键断点 - 用
max-width而非min-width定义收缩触发点，更符合“桌面展开、移动收起”的直觉 - 测试真机时重点看横竖屏切换瞬间：有些 Android 浏览器会把
width: 0渲染成极窄（如 1px），而不是完全消失
要不要放弃float改用flex或grid
如果项目已支持 IE11+，直接用 display: flex 配 flex: 0 0 240px 和 flex: 1，收缩时改 flex-basis 或 width，不用操心 BFC、清除浮动、占位残留——这是最省心的路。
但若必须兼容 IE9/10，或维护遗留系统（比如某 CMS 主题强依赖 float 结构），就别强行升级。这时候的关键不是“多先进”，而是“改一处，不崩三处”。浮动方案依然可靠，只是得把 overflow、box-sizing、transition-timing-function 这些细节钉死。
复杂点往往不在收缩逻辑本身，而在侧边栏内部是否用了 JS 动态计算高度、是否绑了 resize 监听、是否有第三方组件插入了不可控的 margin —— 这些才是上线后半夜报警的来源。
