现代HTML双栏布局首选flex或grid：flex适合左栏固定右栏自适应，需设父容器height；grid适合多栏扩展与收展，用minmax()防错位；响应式改flex-direction为column；必须用语义化标签并确保父容器有明确高度。
现代 HTML 双栏布局，直接用 display: flex 或 display: grid 就能搞定，不需要 float、position: absolute 或表格模拟——那些方案要么难维护，要么一交互就出错。
为什么 flex 是最稳妥的起点
它天然适配“左栏固定 + 右栏自适应”这种主次结构，且父子高度上下文清晰，新手不易踩坑。
- 父容器必须设
display: flex和明确高度（如height: 100vh），否则flex: 1没参照物 - 左栏推荐写成
flex: 0 0 240px（不伸缩、不收缩、宽固定），比只写width: 240px更稳，防内容撑开变形 - 右栏写
flex: 1，不是width: calc(100% - 240px)——后者在 flex 容器里会被忽略 - 右栏内容超长时，加
overflow: auto，否则滚动条会跑出容器甚至跑到body上（Safari 尤其明显） - 别在子元素上同时写
width和flex，CSS 会按 flex 规则计算，width实际失效但容易误导人
grid 适合什么场景？怎么防折叠错位
当你需要未来扩展为三栏、顶部+侧边+底部四区，或支持侧边栏收起/展开（比如从 240px 折叠到 64px 图标态），grid 更直观，但写法不能“差不多就行”。
-
grid-template-columns推荐写成minmax(64px, 240px) 1fr，不是死写240px——收起时自动缩到 64px，展开后撑到 240px - 必须配齐
grid-template-rows和grid-template-columns，缺一不可；grid-template-areas单独写无效 - 主内容区一定要设
overflow: auto，否则弹窗、长表格会把整个页面撑高，侧边栏被截断 - 响应式改布局时，保持
grid-area名称不变，只改grid-template-areas字符串，否则 JS 绑定的选择器全失效
响应式切换：小屏堆叠别用 display: none
左右变上下，核心就一句：媒体查询里把父容器的 flex-direction 从 row 改成 column。硬删样式或用 display: none 隐藏一栏，会导致 SEO 和可访问性崩掉。
立即学习“前端免费学习笔记（深入）”；
- 断点值别硬套
max-width: 768px，优先用max-width: 600px或max-width: 480px，更贴合真实手机 viewport - 竖排后，
align-items行为会变：横排常用flex-start，竖排后可能需显式设align-items: stretch或center控制对齐 - 右侧若含固定高广告图，竖排后加
max-width: 100%和height: auto保比例，否则会撑开页面
语义化标签不是加分项，是必要前提
别再全用 <div class="left"> 和 <code><div class="right"> ——结构混乱会让后期加 JS、改样式、做 SEO 或适配屏幕阅读器变得异常困难。<ul><li>导航菜单用 <code><nav></nav>，不是 <div class="nav"><li>主体内容区用 <code><main></main>，左右分栏就包在里面；侧边栏用 <aside></aside>，比 <div id="sidebar"> 更易被识别<li>DOM 顺序建议 <code><main></main> 在前、<aside></aside> 在后，这样小屏堆叠时主内容仍优先读取
<section></section> 替代 <aside></aside>，语义更准确真正容易被忽略的是：所有 flex 或 grid 布局都依赖父容器有明确高度上下文，而这个高度常常被 reset.css、第三方库或未声明的 min-height 悄悄覆盖。调试时先检查父容器是否真有高度，比反复调 flex 参数更省时间。
