如何用CSS浮动实现固定侧栏和流式主内容-css教程-PHP中文网

float无法实现真正固定侧栏，因其本质是文本环绕式排版，元素仍在文档坐标系内、随滚动移动；必须用position: fixed配合margin避让和z-index控制层级。

如何用css浮动实现固定侧栏和流式主内容

不能用 float 实现“固定”侧栏——float 只能让元素脱离正常流、向左或右“漂”，但它仍随文档滚动，且受父容器和兄弟元素影响；真正意义上的“固定”必须用 position: fixed。

为什么 float 无法实现“固定”效果

float 的本质是文本环绕式排版，它让元素脱离普通文档流，但仍在**文档坐标系内**定位，滚动时会一起动。你看到的“卡在左边”只是因为父容器没塌陷、主内容被 margin 推开了，并非真正固定在视口。

给 .sidebar 加 float: left 后再加 position: fixed，后者会直接覆盖前者——CSS 规范明确：float 和 position: fixed（或 absolute）互斥，浏览器会忽略 float
常见错觉来源：用 float + margin-left 做两栏布局，再把整个页面设成 height: 100vh，看起来像“固定”，其实一滚动就露馅
如果你的目标是“随页面滚动而始终可见”，float 从设计上就不支持这个行为

用 position: fixed 正确实现固定侧栏

这才是解决“固定侧栏 + 流式主内容”的标准路径。关键不是“怎么浮”，而是“怎么定”+“怎么避让”。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.sidebar 必须设 position: fixed、top: 0、left: 0（或 right: 0），并显式定义 width（如 240px）
.main-content 不要浮动，也不要用 float 配合 margin 模拟避让——应直接用 margin-left: 240px（值 ≥ 侧栏宽度），这是最稳定、最易维护的方式
务必加 z-index: 100 到侧栏，否则主内容里若有 position: relative 元素，可能盖住侧栏
侧栏高度建议设为 height: 100vh，避免内容短时撑不满视口；若需跟随页面高度，改用 min-height: 100vh 更稳妥

浮动布局只适合“并排但不固定”的场景

如果你实际需求是“侧栏和主内容水平并排，且都随页面滚动”，那 float 才适用——但它和“固定”无关，别混用。

典型结构：.sidebar { float: left; width: 200px; } + .main-content { margin-left: 200px; }
父容器必须清除浮动（推荐伪元素 ::after + clear: both），否则高度塌陷，后续内容会上移
主内容区不能设 float，否则它也会脱离流、失去块级特性；靠 margin 留白才是正解
响应式下记得在小屏用媒体查询关掉 float 和 margin，改回垂直堆叠