现代双栏布局应优先用 Flex 或 Grid，语义上主内容用 、辅助信息用 ，左栏设 flex: 0 0 240px 并加 flex-shrink: 0，右栏用 flex: 1 且设 min-width: 300px；Grid 推荐 fr 单位与 gap，响应式切单栏仅需一条媒体查询，避免混用布局方式。
直接用 display: flex 或 display: grid 控制父容器，别嵌套 float、inline-block 或绝对定位——这些方案在现代项目里只会增加维护成本和意外错位风险。
怎么写语义正确的双栏 HTML 结构
用 <main></main> 包主内容，<aside></aside> 包辅助信息（如侧边导航、技能标签、联系方式），这是 HTML5 明确规定的语义关系。不要全用 <div class="left"> 和 <code><div class="right">。
<ul>
<li>
<code><main></main> 必须在 DOM 顺序上靠前，小屏堆叠时才能优先被读取和渲染
<aside></aside> 不是导航就别塞进 <nav></nav>；如果是广告或推荐流，改用 <section></section> 更准确<aside></aside> 加 role="navigation"，语义冲突会导致屏幕阅读器误判Flex 布局下左右栏宽度怎么设才不崩
左栏固定宽、右栏自适应是最常见场景。关键不是写 width: 240px，而是用 flex: 0 0 240px —— 这表示“不伸缩、不收缩、基础宽 240px”，能防内容撑开变形。
- 右栏统一用
flex: 1，它会自动占满剩余空间；加min-width: 300px防小屏过窄 - 必须显式写
flex-shrink: 0在左栏上，否则某些浏览器（尤其 Safari）会在窄屏下强行压缩它 - 别在子元素上写
width: 100%，Flex 容器里宽度由flex分配，硬写反而破坏布局
Grid 布局中列宽用百分比还是 fr 单位
用 fr 更稳。比如 grid-template-columns: 240px 1fr 表示左栏固定 240px，右栏吃掉所有剩余空间；而 30% 70% 在小数像素四舍五入时容易错位，尤其在高 DPI 屏幕上。
立即学习“前端免费学习笔记（深入）”；
- 间隙统一用
gap: 1rem，不用在子元素上手动加margin - 响应式切单栏只需一条媒体查询：
@media (max-width: 600px) { .container { grid-template-columns: 1fr; } } - 删掉子元素上残留的
float、display: inline-block等干扰样式，Grid 会完全忽略它们
为什么 align-items 默认值会让两栏看起来“不对齐”
因为 align-items: stretch（Flex 默认）会让两栏高度强制拉齐，但简历、文章页这类内容天然长度不均，视觉上反而显得右侧空一大截。
- 解决办法是显式设
align-items: flex-start，让左右栏各自按内容高度撑开 - 注意某些 CSS 重置库（如 Normalize.css）会覆盖这个默认值，要检查父容器是否被意外设成
flex-start - Grid 中没有这个问题，它的行高由内容决定，无需额外对齐控制
真正麻烦的不是写哪一行代码，而是混合使用多种布局逻辑：比如在 Flex 容器里又给子元素加 float，或在 Grid 里手动算 margin-left。保持单一布局模型，问题就少一半。
