最稳方案是父容器设 display: flex，左栏用 flex: 0 0 240px 防撑开，右栏用 flex: 1 自适应；禁用 width: 100% 避免冲突，小屏用 flex-direction: column 切换布局。
用 display: flex 实现导航+主内容两栏最稳
现代网站导航栏（.nav）和主内容区（.main）组成经典两栏，直接上 flex 是当前最可靠、最少坑的方案。父容器加 display: flex，左栏设固定宽且禁缩放，右栏用 flex: 1 吃掉剩余空间。
常见错误现象：.main 没撑满、左右高度不齐、小屏下错位、IE 下空白
-
.nav推荐写法：flex: 0 0 240px（比只写width: 240px更安全，防文字撑开或媒体查询干扰） -
.main必须写flex: 1，别写width: 100%——二者冲突，后者会覆盖伸缩行为 - 若导航含长英文/URL无空格，加
word-break: break-word防溢出 - 等高依赖父容器默认
align-items: stretch，但某些 CSS 重置库（如 Normalize）可能改掉它，建议显式补一句
calc() 在导航栏宽度计算中怎么用才不翻车
calc() 不是布局方案，只是辅助算宽的工具，仅适合“左侧导航固定 + 右侧留白/边距”的微调场景。它不能替代 flex 或 grid 的布局逻辑，纯靠它做两栏极易出错。
典型错误：width: calc(100% - 240px) 写成 calc(100%-240px)（缺空格），整条声明被浏览器忽略；或父容器没设 width，导致计算结果为 auto
- 语法必须带空格：
calc(100% - 240px)✅，calc(100%-240px)❌ - 只在父容器有明确宽度（如
max-width: 1200px或width: 100vw）时才生效 - 若导航右侧还要留 1rem 间距，得写成
width: calc(100% - 240px - 1rem)，漏一项就换行 - 别用
calc()算高度、滚动位置或响应式断点——它是一次性静态计算，不响应变化
为什么现在不该再用 float 或 position: absolute 布局导航栏
不是“不能用”，而是改起来成本高、兼容性假象强、排查耗时长。尤其当导航要支持折叠、暗色模式、无障碍焦点顺序时，浮动和绝对定位会立刻暴露问题。
真实踩坑场景：浮动后父容器塌陷、tabindex 顺序错乱、屏幕阅读器读不出结构、resize 触发重排异常
-
float必须配合清除（::after伪元素或overflow: hidden），但后者可能截断下拉菜单的box-shadow -
position: absolute要求父容器position: relative，一旦嵌套多层，top/left值极易错位，且脱离文档流后无法参与min-height计算 - 两者都不支持
gap、justify-content: space-between这类现代对齐控制，加个间距就得硬塞margin - 如果项目需兼容 IE10+，
flex已足够；真要保 IE9 及以下，应整体降级为响应式单列，而非死守两栏
响应式切换时，flex-direction 和 grid-template-columns 怎么选
移动端优先的两栏，小屏下通常要从左右变上下。这时改 flex-direction 比改 grid 更轻量、更可控，尤其当 DOM 顺序和语义顺序必须一致时（比如导航在前、内容在后）。
容易被忽略的细节：用 grid 切换方向需重定义整个 grid-template-rows，而 flex 只需一行声明，且能自然继承原有对齐方式
- PC 端：
.container { display: flex; grid-template-columns: 240px 1fr; }——grid写法更语义化，但 IE 完全不支持 - 移动端：
@media (max-width: 768px) { .container { flex-direction: column; } }—— 无需改 HTML，DOM 顺序即渲染顺序 - 若用
grid响应式，grid-template-columns: 1fr会让两栏叠成一列，但左栏仍占第一行位置，需额外用grid-row调整顺序，增加复杂度 - 小屏下左栏高度突增（如展开菜单）时，
flex的align-items仍可统一控制，grid需单独设每行align-self
真正麻烦的不是怎么让两栏并排，而是后续加搜索框、用户头像、通知徽标、语言切换时，布局是否还能保持语义清晰、扩展不破相。Flex 的父子关系和流式逻辑，在这点上比所有旧方案都更扛折腾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
