双栏布局需按场景选技术：现代项目首选CSS Grid，IE11等旧环境用Flex并注意等高陷阱，表格型表单用table-layout: fixed，禁用绝对定位做双栏，语义与内容流优先。
双栏布局不是“选一种写法就行”，而是得先看清楚：你到底要解决什么问题——是简历排版、表单对齐、内容分栏，还是老系统兼容？不同场景下，grid、flex、table-layout: fixed 的适用性天差地别，强行套用只会卡在响应式失效、语义崩坏或 IE 下塌陷上。
用 grid 做语义清晰的双栏（现代项目首选）
这是目前最可控、最易维护的方式，尤其适合简历、个人主页、仪表盘等需要左右功能分区的页面。
-
grid-template-columns: 30% 70%直接定义比例，左侧放联系信息/技能，右侧放经历/项目 - 必须加
gap控制间距，别依赖 margin —— grid 的 gap 是跨列统一计算的 - 小屏切单栏只用一条媒体查询：
@media (max-width: 768px) { grid-template-columns: 1fr; }，不用改 HTML 结构 - 别给子元素设
width—— grid 列宽由容器控制，子项设 width 反而可能触发溢出或换行 - 如果右侧内容高度远大于左侧，又不想拉长整页，给右侧加
overflow-y: auto即可滚动，不影响左侧布局流
用 flex 替代 grid 的前提和陷阱
只有当你必须支持 IE11 或某些定制化 CMS（不支持 CSS Grid）时，才考虑 flex。但它不是 grid 的平替，行为逻辑完全不同。
-
display: flex默认align-items: stretch，会让两栏强制等高 —— 简历里左侧只有 3 行文字，右侧却撑出 2 米高，视觉突兀 - 必须显式写
align-items: flex-start，否则左右栏高度会互相绑架 - 列宽不能只靠
width: 30%，要用flex: 0 0 30%—— 防止内容超长时被压缩变形 - 如果右侧是视频或 iframe，它可能默认带固有宽高比，需额外加
flex-shrink: 0防止被 flex 压缩
table-layout: fixed 只用于表格内部列宽控制
别用 <table> 标签做整页双栏，那是语义错误；但如果你在写表单、配置项这类“左右标签+输入框”的两列表格，<code>table-layout: fixed 是唯一能真正锁死列宽的方法。
立即学习“前端免费学习笔记（深入）”；
-
width="50%"写在<td> 上基本无效 —— 浏览器默认 <code>table-layout: auto，完全按内容撑开 - 必须组合使用：
<table style="width: 100%; table-layout: fixed;"> + <code><colgroup> <col style="width: 30%"> <col style="width: 70%"> </colgroup> -
<colgroup></colgroup>必须紧贴<table> 开始后、<code><thead> 前，顺序错就整个失效 <li>一旦某行用了 <code>colspan="2"，该行立刻脱离 fixed 布局逻辑，竖线大概率错位，此时只能手动加 border 或 JS 修正 - 想让视频区域“视觉上在右边、逻辑上还在流里”，必须用
display: flex或display: grid包裹左右两块，再给视频容器加height: 100%和object-fit: cover - 如果视频要全高且随滚动隐藏/显示，优先用
position: sticky而非absolute，它仍在文档流中 - 移动端慎用
vh单位——Safari 在地址栏收起/展开时会重算100vh，导致视频区域跳动
绝对定位（position: absolute）不是双栏解法
有人把右侧视频区域设成 position: absolute; right: 0; top: 0; height: 100vh;，看似实现了“右半屏固定”，但后续所有内容都会叠在首页顶部——因为绝对定位脱离文档流，浏览器根本不知道它占了多大空间。
真正难的不是写对一行 grid-template-columns，而是判断当前需求是否真的需要双栏——比如纯文字新闻页，用 column-count: 2 做分栏阅读体验更好；而表单里的 label/input 对齐，用 display: grid 套一层 grid-template-columns: max-content 1fr 才是最稳的。布局选择，永远从语义和内容流出发，而不是从“看起来像不像双栏”出发。
