display: flex 是左右分栏综合最优方案，左栏用 flex: 0 0 250px 锁定宽度，右栏用 flex: 1 占满剩余空间并设 min-width 防过窄，等高需保持父容器 align-items: stretch，默认不自动拉高。
现代项目里，display: flex 是左右分栏最稳妥的选择；display: grid 更干净但需放弃 IE 支持；float 仅在维护老系统时才该出现。
用 display: flex 实现左固定右自适应
这是当前兼容性、可维护性、响应式扩展性综合最优的方案。关键不是只写 width: 250px，而是用 flex: 0 0 250px 锁死左栏：不伸缩、不收缩、基础宽固定，避免内容撑开或压缩变形。
- 父容器必须设
display: flex，漏掉就完全失效 - 右栏用
flex: 1占满剩余空间；若要防过窄，加min-width: 300px - 高度不对齐是默认行为——左栏不会随右栏拉高；如需等高，确认父容器没被重置
align-items（默认值stretch就够） - 右栏含长英文/数字无空格时会溢出容器，加
word-break: break-word或overflow-wrap: break-word
用 display: grid 写两列更语义化
当你明确知道结构就是“两列”，且不需兼容 IE 或旧 Edge（≤15），grid 的代码更直白、更少副作用。
- 父容器设
display: grid+grid-template-columns: 250px 1fr，1fr不是百分比，是“剩余空间的一份” - 子元素别再设
width: 100%，否则会破坏轨道计算 - 加间隙统一用
gap: 1rem，别靠margin挤，否则网格线对不准 - 小屏适配可用
grid-template-columns: minmax(250px, 1fr) 1fr，但注意：真到小屏时，1fr可能撑不开一列，得配合媒体查询切单列
为什么别碰 float 和 position: absolute
它们不是“不能用”，而是协作成本太高：别人接手第一反应是删掉重写。
-
float必须手动清除浮动，overflow: hidden看似简单，但会意外裁剪box-shadow或position: absolute子元素 - 左右栏高度天然不一致，背景色无法对齐；想等高得靠 JS 或 BFC 嵌套，不稳定
- 响应式切单列时，
float规则要全部重写；而flex只需改flex-direction: column -
position: absolute脱离文档流，后续内容排版极易错乱，调试成本远高于收益
真正容易被忽略的是高度对齐问题——它不是 bug，是 CSS 默认行为；所有方案里，左栏都不会自动随右栏拉高，除非你显式干预 align-items 或用 grid 的 align-content（注意别和 align-items 混用）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
