固定侧边栏必须用 position: fixed 或现代布局，float 只影响文档流且不固定；calc(100vw - 240px) 不准因未扣除滚动条宽度（约17px）和默认 margin；响应式需配合媒体查询切换定位与显隐；宽度推荐 rem 或 min/max-width 组合以适配多设备。
浮动侧边栏用 float 还是 position: fixed？
别用 float 做固定侧边栏——它不“固定”，只影响文档流排版，滚动时会跟着动。真正要的是视觉上钉在视口一侧、不随页面滚动的栏，必须用 position: fixed 或现代布局（如 display: grid）。float 在这里纯属历史遗留误用。
实操建议：
-
position: fixed配合top/left定位，宽度设为固定值（如240px） - 主内容区需用
margin-left（或padding-left）预留出侧边栏宽度，避免被遮挡 - 若侧边栏需随页面高度自适应，记得给父容器加
height: 100vh或监听resize事件重算
calc() 算剩余宽度时，为什么 100vw - 240px 有时不准？
常见现象：侧边栏设了 240px，主内容用 width: calc(100vw - 240px)，但右边出现横向滚动条，或内容被切掉。
原因很实在：
立即学习“前端免费学习笔记（深入）”；
-
100vw是整个视口宽度，包含滚动条占位（通常约17px），而240px是精确像素，没预留滚动条空间 - 如果页面本身有
body { margin: 0 }没写，浏览器默认8px外边距也会吃掉空间 -
box-sizing默认是content-box，边框、内边距会额外撑宽
稳妥写法：width: calc(100vw - 240px - 17px)（17px 是常见滚动条宽度），或更推荐用 margin-left: 240px 替代宽度计算。
固定侧边栏和响应式断点怎么配合？
侧边栏在小屏下通常要收起，否则挤占主要内容。这时候不能只靠 calc()，得结合媒体查询控制显隐和定位逻辑。
关键点：
- 小屏下把
position: fixed改成position: static或absolute，让它回归文档流 - 用
transform: translateX(-100%)配合过渡实现滑入滑出，比display: none更利于动画和可访问性 - 断点值别硬写
768px，优先用min-width: 48em这类相对单位，适配缩放和不同设备 - 收起状态时，主内容区的
margin-left要同步清零，否则留白还在
用 px 设固定宽度，真的一劳永逸吗？
不是。固定像素在高 DPI 屏幕（如 MacBook Retina、Windows 缩放 125%）下会显得过窄，文字挤在一起；而在低分辨率老设备上又可能撑不满。
更鲁棒的做法：
- 侧边栏宽度用
rem（如15rem），基于根字体大小动态缩放 - 或用
min-width: 240px; max-width: 280px; width: 15%组合，兼顾最小可用性和弹性 - 如果必须用
px，至少加一句@media (-webkit-min-device-pixel-ratio: 2)微调字体和内边距，避免模糊或拥挤
真正难的不是算出那个数字，而是让这个数字在各种缩放、DPI、字体设置下都“看起来对”。别指望一次写死就完事。
