现代双栏布局首选 display: flex，避免使用已淘汰的 float；左栏固定宽、右栏用 flex: 1 自适应；响应式时小屏应设 flex-direction: column 而非 display: none。
用 display: flex 实现可靠双栏，别碰 float
现代双栏布局首选 display: flex，float 已淘汰且易引发高度塌陷、清除浮动等隐性问题。Flex 布局天然支持对齐、伸缩和响应式调整，浏览器兼容性也足够好（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+）。
常见错误是给容器设 display: flex 后，忘记子元素默认不换行或不占满剩余空间：
-
flex-direction: row是默认值，不用显式写 - 左栏固定宽（如
200px），右栏自适应：给右栏加flex: 1 - 若两栏都需等宽，统一用
flex: 1；若左窄右宽，可设flex: 0 0 240px（不缩放、不增长、基础宽 240px）
用 grid-template-columns 控制双栏比例更直观
CSS Grid 更适合明确列结构的双栏，尤其当需要留间隙、对齐多行内容或嵌套复杂区域时。grid-template-columns 直接定义列宽，语义清晰，调试友好。
典型误用是只写 grid 却漏掉 grid-template-columns，导致子元素仍堆叠成单列：
立即学习“前端免费学习笔记（深入）”；
- 固定+自适应：
grid-template-columns: 250px 1fr - 等宽两栏：
grid-template-columns: 1fr 1fr或简写为1fr 1fr - 带间隙时用
gap: 16px，它自动避开容器内外边距，比margin更可控
响应式断点里双栏变单栏，@media 要重置布局模式
移动端通常需从双栏切回单栏，但很多人只改宽度，忘了重置 display 或 grid-template-columns，结果在小屏上依然强行双栏、内容被挤压或溢出。
关键不是“隐藏某栏”，而是让布局模型回归单列流：
- Flex 方案下，小屏加
flex-direction: column - Grid 方案下，小屏改
grid-template-columns: 1fr - 避免用
display: none隐藏一栏——这会让语义结构断裂，影响可访问性和 SEO
双栏内容高度不一致时，align-items 和 align-content 别混用
左栏短、右栏长，视觉上底部不对齐？这不是 bug，是 Flex/Grid 的默认行为。要对齐底部，必须主动设置对齐属性。
常见混淆：align-items 控制交叉轴（垂直方向）上单行项目的对齐，align-content 只在多行 Flex 容器中生效（即 flex-wrap: wrap 且有多行时）：
- 双栏单行布局，只需设容器
align-items: flex-end（底部对齐）或center（居中） - Grid 中对应的是
align-items（对齐单元格内容）或justify-items（对齐单元格自身） - 如果用了
min-height: 100vh但没生效，检查父级是否没高度——Flex/Grid 容器需有明确高度才能撑开子项
height 或未脱离文档流（比如被浮动元素影响），会导致 100vh、flex: 1 等行为失效——这种问题不报错，但布局就是“看起来怪”，得逐层检查计算后的高度。 
