现代项目应使用flex或grid替代float实现响应式侧边栏，因float易致错位、塌陷、滚动遮挡及无障碍问题；需用box-sizing: border-box、正确清除浮动、分离媒体查询与JS显隐逻辑，并慎用fixed布局。
直接用 float 做响应式侧边栏，现在只适合兼容 IE8/9 的老项目或极简静态页；现代项目请改用 flex 或 grid ——否则你很快会遇到错位、塌陷、滚动遮挡、无障碍断裂这些硬伤。
为什么 float 在小屏下容易错位
浮动元素脱离文档流后，高度不一致就会导致兄弟元素“上浮”或“下沉”，尤其当侧边栏内容短、主内容长时，.content 可能直接从侧边栏下方穿出。媒体查询切到 width: 100% 后若没清除浮动，父容器仍会塌陷，造成后续元素布局混乱。
实操建议：
- 必须为父容器加
overflow: hidden或伪类::after { content: ""; display: block; clear: both; } - 小屏断点里不仅要设
width: 100%，还要加float: none，否则旧版 Safari 可能忽略宽度重置 - 别依赖
margin-left让主内容“绕开”侧边栏——它在 flex 容器或缩放页面里极易失效
media query 断点怎么写才不和 JS 冲突
如果你用 JS 控制 classList.toggle('open')，又在 CSS 里写了 @media (max-width: 767px) { .sidebar { display: none; } }，那 JS 切换 class 就完全无效：display: none 优先级高于任何 transform 或 visibility 动画。
立即学习“前端免费学习笔记（深入）”；
正确做法是让媒体查询只管“是否允许浮动”，不管“显隐状态”：
- 大屏下：
@media (min-width: 768px) { .sidebar { float: left; width: 25%; } .content { float: left; width: 75%; } } - 小屏下：
@media (max-width: 767px) { .sidebar, .content { float: none; width: 100%; } } - 显隐逻辑全交给 JS +
transform: translateX()，CSS 不参与控制开关
float + 百分比宽度的坑：padding 和 border 会让布局超宽
当你写 .sidebar { width: 25%; float: left; padding: 16px; }，实际占宽是 25% + 32px（左右 padding），超出父容器 100%，导致换行或横向滚动条。这不是 bug，是 box-sizing 默认为 content-box 的必然结果。
必须加这一句：
.sidebar, .content {
box-sizing: border-box;
}
否则所有百分比宽度都会失准。另外，flex-shrink: 0 在 float 布局里不存在，所以别指望它防压缩——该用固定像素就用固定像素，该用 max-width 就配 max-width。
移动端 fixed 侧边栏闪动、滚动透底怎么办
用 position: fixed 模拟“浮动侧边栏”时，iOS Safari 在地址栏收放、软键盘弹出时会触发重绘，导致侧边栏跳动甚至消失。这不是动画问题，是渲染层未锁定。
关键补丁：
- 给侧边栏加
backface-visibility: hidden强制启用合成层 - 滑出时同步给
<body>加overflow: hidden，收起时再移除——否则手指划动会透到底部内容 - 别用
left: -100%，改用transform: translateX(-100%)，并配will-change: transform（仅激活态） -
z-index必须设在侧边栏自身，且检查所有父级是否意外创建了层叠上下文（比如position: relative+z-index）
最常被忽略的一点：height: 100vh 在 iOS Safari 中可能因地址栏变化而抖动，稳妥做法是用 height: 100% + 父容器 min-height: 100vh，再配合 JS 监听 resize 微调。
