flex: 0 0 250px比width: 250px更安全，因其明确禁用伸缩、固定基础宽度且需配合box-sizing: border-box；右栏用flex: 1即可自适应，无需calc计算；grid虽简洁但ie不支持且默认等高易致视觉错位。
flex布局里左栏用flex: 0 0 250px比width: 250px更安全
只写width: 250px在display: flex容器中是危险的：一旦父容器变窄或右栏内容撑开，左栏可能被压缩——尤其当它带padding或border时，实际宽度会超出预期。根本原因是flex-shrink: 1默认开启。
正确做法是用flex: 0 0 250px，它等价于flex-grow: 0; flex-shrink: 0; flex-basis: 250px，明确禁用伸缩、固定基础宽度。这比单独设width再加flex-shrink: 0更简洁，也不容易漏掉。
必须配合box-sizing: border-box，否则padding和border会额外增加宽度，导致右栏错位或横向滚动。
右栏用flex: 1就行，别碰calc()
flex: 1会让右栏自动填满剩余空间，语义清晰、响应式天然友好。而width: calc(100% - 250px)这类写法容易出错：只要左栏加了border或padding，或者父容器有padding，计算就失效；而且无法响应min-width或max-width约束。
如果右栏需要最小宽度保护（比如防止内容被压太窄），直接加min-width: 300px即可，flex: 1和min-width能共存。
右栏内容含长英文/数字无空格时容易溢出，此时在右栏加word-break: break-word或overflow-wrap: break-word。
grid方案虽简洁，但IE完全不支持且默认等高易错位
display: grid只需一行定义：grid-template-columns: 250px 1fr，子项顺序自由、无需额外样式，确实最干净。但它有两个硬限制：
IE全系不支持，Edge ≤15也不行；若项目需兼容旧环境，必须降级为flex。
默认align-items: stretch会让左右栏等高——右栏内容少时，左栏会被拉长，视觉上像“上浮”，背景色对不齐。解决办法是显式设align-items: start。
别给子项再加width: 100%，这会和grid轨道冲突，导致错位或横向滚动；加间隙统一用gap: 1rem，别用margin。
float方案现在只适合修老系统，别在新项目里用
float + margin-left能跑通IE6，但代价太高：HTML中左栏必须写在右栏前面，违反内容优先原则；overflow: hidden清浮动会意外裁剪box-shadow或position: absolute子元素；响应式切单列时规则得全部重写。
常见错误包括：margin-left没留够左栏总宽度（含border和padding），导致右栏文字挤到左边下面；清除浮动用overflow: hidden而非伪元素::after，导致后续定位异常。
所有方案里，左栏都不会自动随右栏拉高——这不是bug，是CSS默认行为。想等高得靠JS或复杂BFC嵌套，不稳定；真正可控的做法是接受高度不对齐，或统一用min-height兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
