现代项目应优先使用 display: flex 或 display: grid 实现两栏布局，避免 float 和 position: absolute；flex 方案兼容 IE10+，左栏用 flex: 0 0 250px，右栏用 flex: 1；grid 方案更语义化，适用于无需兼容 IE 的场景，写法为 grid-template-columns: 250px 1fr。
现代项目直接用
或
，别碰
和
——它们不是“还能用”，而是“改起来会骂人”。
用
实现左固定右自适应最稳妥
这是当前最通用、最可控的写法，IE10+ 全支持，代码少、逻辑直。
父容器必须设
，别漏掉；默认
，不用额外写
左栏用
（不伸缩、不收缩、基础宽 250px），比只写
更安全，能防内容挤压变形
右栏用
，它会自动占满剩余空间；若需最小宽度保护，加
常见错误：右栏内容含长英文/数字无空格时溢出，此时在右栏加
或
注意高度对齐：左栏默认不会随右栏拉高，要等高就得确认父容器
没被其他样式覆盖（它是默认值，但某些重置 CSS 会干掉）
用
写两栏更语义化
当你明确知道是“两列结构”，且不需兼容 IE，
是最干净的——一行定义列宽，不依赖子项顺序或伸缩逻辑。
父容器设
+
，
表示“剩余空间的 1 份”，不是百分比
不要给子元素再设
，
子项默认不继承父容器
，双重要求会导致错位
加间隙用
，别用
挤子元素，否则破坏轨道计算
IE 完全不支持
，Edge ≤15 也不行；若需兼容，得降级为
方案
小屏适配时，
可让左栏保最小宽、右栏弹性分配，但注意小屏下可能撑不开一列
布局现在为什么不该用
它不是“过时”，而是“协作成本太高”——别人接手第一反应是删掉重写。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
必须手动清除浮动，
看似简单，但会意外裁剪
或
子元素
左右栏高度不一致时，背景色无法对齐；想等高得靠 JS 或 BFC 技巧，不稳定
响应式切单列时，
规则要全部重写，而
只需改
唯一合理使用场景：维护 IE6–9 的老系统；新项目里出现
，基本等于技术债预警
右侧内容超长时容易被忽略的细节
所有方案里，右栏内容高度都决定整体容器高度，但左栏不会自动拉伸对齐——这不是 bug，是 CSS 默认行为。
下要等高，得确认父容器没被其他样式重置
下要等高，得看
和子项自身
是否参与计算（截至 2026 年 5 月 2 日，主流浏览器中
子项仍默认不拉伸填满轨道高度，除非显式设
或父容器设
）
如果右栏有滚动需求，建议在右栏加
并设
（防止 flex 容器不收缩）
display: flexdisplay: gridfloatposition: absolutedisplay: flexdisplay: flexflex-direction: rowflex: 0 0 250pxwidth: 250pxflex: 1min-width: 300pxword-break: break-wordoverflow-wrap: break-wordalign-items: stretchdisplay: gridgriddisplay: gridgrid-template-columns: 250px 1fr1frwidth: 100%gridwidthgap: 1remmargingridflexminmax(250px, 1fr)floatoverflow: hiddenbox-shadowposition: absolutefloatflexflex-directionfloat: leftflexalign-itemsgridalign-contentheightgridalign-self: stretchalign-content: stretchoverflow-y: automin-height: 0