最稳妥方案是用 display: flex 实现一行两列：父容器设 display: flex 和 gap，子元素设 flex: 1，自动等宽自适应且避免溢出；IE11 兼容时改用 display: table；避免使用 float 做布局。
用 display: flex 实现一行两列最稳妥
现代浏览器下，display: flex 是控制单行两列布局最直接、可控性最强的方式。它不依赖浮动或定位，也不受文档流塌陷干扰，响应式也容易加。
常见错误是直接套用 float: left 或强行写两个 div 并设 width: 50%，结果在边框/内边距存在时溢出、换行，或者父容器没清除浮动导致后续元素错位。
- 父容器加
display: flex，子元素默认横向排列 - 两个子元素都设
flex: 1，自动等宽且自适应（比写死width: 50%更健壮） - 加
gap: 8px控制间距，比用margin更干净，不会影响盒模型计算
<div style="display: flex; gap: 8px;"> <div style="flex: 1;">左栏</div> <div style="flex: 1;">右栏</div> </div>
IE11 要兼容？改用 display: table
如果项目必须支持 IE11，flex 的部分特性（比如 gap、flex-wrap）行为不一致，甚至某些 flex 布局会整体失效。这时候退回到 display: table 是更稳的选择。
它模拟表格行为，天然支持等宽、对齐、无换行，而且 IE8+ 都支持。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: table; width: 100%（必须设宽度，否则可能收缩） - 子元素设
display: table-cell，不用管float或width，它们会自动均分 - 用
border-spacing替代gap，但只对父容器生效，且不能单独控制左右间距
<div style="display: table; width: 100%; border-spacing: 8px;"> <div style="display: table-cell;">左栏</div> <div style="display: table-cell;">右栏</div> </div>
别用 float，除非你真要文字环绕
float 本意是让文字绕排图片，不是做布局工具。现在硬用它实现两列，问题一堆：父容器高度塌陷、需要额外 clear、子元素 margin 计算混乱、响应式断点难控制。
典型错误现象：div 看起来“不见了”，其实是父容器高度为 0；或者第二列突然掉到下一行，只因为第一列内容稍长一点。
- 如果非要用（比如维护老代码），务必给父容器加
overflow: hidden或伪元素::after清除浮动 - 两列宽度别写死
50%，改用calc(50% - 4px)预留间隙空间 - 移动端媒体查询里，
float很难优雅地切回单列，不如flex直接flex-direction: column
grid 可以，但小题大做
用 display: grid 写一行两列完全可行，语法还更简洁：grid-template-columns: 1fr 1fr。但它适合复杂网格场景，比如多行多列、跨区域、对齐控制等。
单纯一行两列就上 grid，反而增加理解成本，尤其当团队里有人不熟悉 grid 的隐式轨道、minmax() 行为时，后续改起来容易出错。
- 如果只是静态两列，
flex足够，语义也更贴切（一维布局） - 如果未来大概率扩展成三列、带侧边栏、需要垂直居中对齐，那直接上
grid更省事 - 注意
grid在 Safari 旧版本里有兼容问题，比如fr单位解析异常，建议加minmax(0, 1fr)兜底
实际写的时候，多数情况就选 flex。真正容易被忽略的是：两列内容高度不同时，是否要拉齐？要不要留空隙？这些细节决定了该用 align-items: stretch 还是 flex-start，而不是光把结构搭出来就算完。
