最快实现左右两栏的现代布局首选 display: flex，主栏设 flex: 1 自适应剩余空间，副栏用 flex: 0 0 240px 固定宽度，避免 width: 100% 破坏弹性行为。
用 display: flex 最快实现左右两栏，且主栏自适应
现代布局首选 display: flex，不用浮动、不依赖固定宽高，主栏（内容区）可设 flex: 1 自动撑满剩余空间，副栏（如侧边栏）设固定宽或 flex: 0 0 240px。
常见错误是给主栏加 width: 100% —— 在 flex 容器里这反而会破坏弹性行为，导致副栏被挤出或换行。
实操建议：
- 父容器设
display: flex，子元素即左右两栏 - 副栏推荐用
flex: 0 0 240px（不缩放、不增长、固定宽），比单纯width更健壮 - 主栏用
flex: 1，它等价于flex: 1 1 0，能正确响应剩余空间 - 若需响应式，在小屏下可改用
flex-direction: column让两栏垂直堆叠
兼容老浏览器？float + margin 仍可用但要清浮动
float 方案在 IE8+ 依然有效，但必须处理父容器高度塌陷问题。不能只靠 overflow: hidden —— 它会意外裁剪 position: absolute 子元素或阴影。
立即学习“前端免费学习笔记（深入）”；
更稳妥的清浮动方式是用伪元素：
.container::after {
content: "";
display: table;
clear: both;
}
实操要点：
- 副栏先写并设
float: left或float: right，宽度明确（如width: 240px） - 主栏用
margin-left（副栏在左）或margin-right（副栏在右）预留空间 - 避免对主栏也设
float，否则无法自适应宽度，且易引发 margin 双倍问题 - 移动端慎用 float，它和
zoom、transform等组合时渲染异常较多
grid 布局适合复杂嵌套，但别为两栏小题大做
如果页面后续要扩展成三栏、带页眉页脚的网格系统，display: grid 是更可持续的选择；但仅实现左右两栏时，grid 的语法开销和调试成本明显高于 flex。
典型误用是写成：
.container { display: grid; grid-template-columns: 1fr 240px; }
看起来简洁，但一旦副栏需要响应式隐藏，就得额外写 grid-template-columns: 1fr 并配合 grid-column: 1 / -1，不如 flex 的 display: none 直观。
适用场景：
- 主副栏内部还要再分多行多列（比如副栏里有上下两个功能块）
- 需要精确控制某区域跨列（如主栏顶部横跨整个容器）
- 已全局采用 grid 布局体系，保持一致性优先
主栏内容溢出时，min-width 和 overflow 得配合着设
左右两栏中，主栏常放表格、代码块或长单词，容易撑破容器。单设 overflow: auto 不够——滚动条出现后，主栏宽度计算可能错乱，尤其在 flex 布局中。
关键点在于：主栏需同时声明 min-width: 0（flex item 默认 min-width: auto，会阻止收缩）。
实操组合：
- 主栏加
min-width: 0+overflow: auto，确保能正常收缩并出现滚动 - 若内容是预格式文本（
<pre class="brush:php;toolbar:false;"></pre>），额外加white-space: pre-wrap避免整行溢出 - 避免在主栏上设
width: 100%或max-width: 100%，它们和 flex 的尺寸逻辑冲突
这个 min-width: 0 是最常被忽略的一环，不加它，哪怕写了 overflow，主栏也不会缩小，副栏可能被顶到下一行。
