现代项目首选flex布局：左侧设width和flex-shrink:0，右侧用flex:1，父容器display:flex并统一box-sizing:border-box防溢出。
左右分栏时 width 百分比加起来超过 100% 就会换行
浏览器渲染时，div 默认是块级元素，宽度为父容器 100%。如果两个子 div 都设 width: 50%，但又没处理 border、padding 或 margin，实际占用宽度就会超 100%，导致第二个 div 被挤到下一行。
常见错误现象：display: inline-block 后两栏错位、或 float: left 后父容器高度塌陷。
- 用
box-sizing: border-box把 padding 和 border 算进 width 里，避免溢出 - 若用
float，记得给父容器加overflow: hidden或伪元素清除浮动 - 推荐优先用
display: flex，天然支持等宽、自适应，且无塌陷问题
用 flex 实现左右分栏最稳当
flex 是目前最可靠的方式，不用算像素、不依赖清除浮动，兼容性也覆盖到 IE10+（IE10 需加 -ms- 前缀）。
示例代码：
<div class="container">
<div class="left">左边内容</div>
<div class="right">右边内容</div>
</div>
<p><style>
.container {
display: flex;
}
.left { flex: 1; } /<em> 等宽 </em>/
.right { flex: 1; }
/<em> 或指定比例：.left { flex: 2; } .right { flex: 1; } </em>/
</style>-
flex: 1等价于flex: 1 1 0，表示等比分配剩余空间 - 想固定左栏宽度（如 200px），右栏自适应：给
.left设width: 200px，.right保持flex: 1 - 注意：不要同时对 flex 子项设
width和flex，容易冲突
纯 width + float 还能用，但得手动清浮动
老项目或需要兼容 IE9 及以下时，可能还得用 float。关键不是“能不能”，而是“清不清得干净”。
- 子元素必须都加
float: left，且 width 总和 ≤ 100% - 父容器必须触发 BFC，否则高度塌陷 —— 最简方式是加
overflow: hidden - 避免用
margin-right分隔两栏，改用padding或内部留白，否则 width 计算更易出错 - IE6/7 中
display: inline可修复双倍 margin bug，但基本已无需考虑
移动端适配时别硬写 width: 50%
在小屏上，左右分栏往往体验很差。直接写死 width: 50% 会导致内容被压缩、文字折行混乱。
- 用媒体查询切换布局：
@media (max-width: 768px) { .container { flex-direction: column; } } - 如果坚持用 width，至少用
min-width保底，比如width: 50%; min-width: 300px; - flex 下更推荐用
flex-wrap: wrap+flex-basis控制换行阈值，比纯 width 更灵活
真正麻烦的从来不是怎么写出两栏，而是当内容长度不均、有图片、带内边距、还要响应式时，width 值到底该设多少——这时候 flex 的弹性反而成了最省心的解法。
