现代项目应优先使用 display: flex 或 display: grid 实现两栏布局，避免 float 和 position: absolute；flex 适用于 ie10+，左栏用 flex: 0 0 250px，右栏用 flex: 1；grid 更语义化但不兼容 ie，推荐 grid-template-columns: 250px 1fr。
现代项目直接用 display: flex 或 display: grid，别碰 float 和 position: absolute —— 它们不是“还能用”，而是“改起来会骂人”。
用 display: flex 实现左侧固定、右侧自适应
这是当前最通用、最可控的写法，IE10+ 全支持，代码少、逻辑直。
- 父容器必须设
display: flex，别漏掉；默认flex-direction: row，不用额外写 - 左栏用
flex: 0 0 250px（不伸缩、不收缩、基础宽 250px），比只写width: 250px更安全，能防内容挤压变形 - 右栏用
flex: 1，它会自动占满剩余空间；若需最小宽度保护，加min-width: 300px - 常见错误：右栏内容含长英文/数字无空格时溢出，此时在右栏加
word-break: break-word或overflow-wrap: break-word - 注意高度对齐：左栏默认不会随右栏拉高，要等高就得显式设父容器
align-items: stretch（默认值，但某些重置样式会覆盖）
用 display: grid 写两栏更语义化
当你明确知道是“两列结构”，且不需兼容 IE，grid 是最干净的——一行定义列宽，不依赖子项顺序或伸缩逻辑。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器设
display: grid+grid-template-columns: 250px 1fr，1fr表示“剩余空间的 1 份”，不是百分比 - 不要给子元素再设
width: 100%，grid 子项默认不继承父容器 width，双重要求会导致错位 - 加间隙用
gap: 1rem，别用margin挤子元素，否则破坏轨道计算 - IE 完全不支持
grid，Edge ≤15 也不行；若需兼容，得降级为flex方案 - 小屏适配时，
minmax(250px, 1fr)可让左栏保最小宽、右栏弹性分配，但注意小屏下可能撑不开一列
float 布局现在为什么不该用
它不是“过时”，而是“协作成本太高”——别人接手第一反应是删掉重写。
- 必须手动清除浮动，
overflow: hidden看似简单，但会意外裁剪box-shadow或position: absolute子元素 - 左右栏高度不一致时，背景色无法对齐；想等高得靠 JS 或 BFC 技巧，不稳定
- 响应式切单列时，
float规则要全部重写，而flex只需改flex-direction - 唯一合理使用场景：维护 IE6–9 的老系统；新项目里出现
float: left，基本等于技术债预警
右侧内容超长时容易被忽略的细节
所有方案里，右栏内容高度都决定整体容器高度，但左栏不会自动拉伸对齐 —— 这不是 bug，是 CSS 默认行为。
-
flex下要等高，得确认父容器没被其他样式重置align-items；grid下则要检查是否误设了align-content而非align-items - 如果右栏有滚动需求（比如后台主内容区），记得给右栏加
overflow-y: auto，并确保父容器有明确高度（如height: 100vh） - 用
grid时，若右栏内容极少，1fr仍会占满剩余空间；这时可考虑grid-template-columns: 250px minmax(min-content, 1fr)来放松约束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
