最稳方式是 display: flex，主容器设 flex，子元素用 flex: 1 或 flex: 0 0 300px；移动端用媒体查询切 column；grid 更适合结构化两列布局；禁用 float。
用 display: flex 实现两列最稳
现代浏览器下，display: flex 是实现 HTML 页面分两列最直接、可控性最强的方式。它天然支持对齐、等高、响应式断点切换，且不需要清除浮动或处理 vertical-align 的诡异行为。
常见错误现象：用 float: left + float: right 后父容器高度塌陷，或者两列在小屏下重叠、错位；又或者用 inline-block 因换行符产生间隙，导致第二列掉到下一行。
- 主容器加
display: flex，子元素默认水平排列 - 两列宽度建议用
flex: 1（均分）或显式设flex: 0 0 300px（固定宽 + 不缩放） - 避免给子列设
width: 50%—— 它不响应内容变化，也不处理边距/内边距挤压 - 移动端想变单列？加媒体查询：
@media (max-width: 768px) { .container { flex-direction: column; } }
grid-template-columns 适合明确列数和间距的场景
如果你清楚要严格分两列、中间留固定间隙，display: grid 比 flex 更语义化，代码更少，尤其适合仪表盘、卡片列表这类结构化布局。
使用场景：后台管理页的侧边栏 + 主内容区；文章页的正文 + 右侧目录；表单左右字段对齐。
立即学习“前端免费学习笔记（深入）”；
- 直接写：
display: grid; grid-template-columns: 250px 1fr;（左侧固定，右侧自适应） - 或：
grid-template-columns: 1fr 1fr;（等宽，但注意：1fr ≠ 50%，它按剩余空间分配） - 列间距用
gap: 20px，别用margin—— 否则可能破坏网格轨道计算 - IE11 不支持
grid，如果必须兼容，得回退到flex或 JS 补丁
不要用 float 做两列了，除非维护老项目
现在还用 float 实现双列，基本等于主动给自己埋坑：清除浮动方式混乱（overflow: hidden、::after 伪元素、clear: both），列高不一致时背景色对不齐，响应式时要反复重写 float 规则。
典型错误：给两列都设 float: left，但父容器没触发 BFC，导致后续元素上浮；或者用 position: absolute 硬定位，脱离文档流后无法参与高度计算。
- 如果必须读老代码，看到
float，第一反应是检查是否有clearfix类或overflow声明 - 千万别在 flex/grid 容器里再套
float—— 浏览器会忽略 float 声明 - 用开发者工具选中元素，看 computed 样式里
float是否变成none，就能快速判断是否被覆盖
响应式断点不是“加个媒体查询”就完事
两列在桌面端看着好好的，一缩到手机就挤成一团，根本原因常是没约束子元素的最小宽度或文本换行逻辑。
性能影响不大，但体验断层明显：比如右侧栏文字不换行撑破容器，或者图片没设 max-width: 100% 导致横向滚动。
- 关键 CSS 要加：
* { box-sizing: border-box; }，否则 padding 会让 width 计算失真 - 文字强制换行：
word-break: break-word;或overflow-wrap: break-word; - 图片/iframe 加：
max-width: 100%; height: auto;，不然会突破列宽 - 别只测 Chrome，iOS Safari 对
flex-wrap和min-width的处理偶尔有差异
实际做双列，最难的不是写那几行 CSS，而是想清楚「哪部分必须固定」「哪部分应该弹性收缩」「断点值取多少才符合真实设备使用习惯」。这些没法靠查文档解决，得在真机上拖动窗口反复看。
