如何用CSS实现两栏自适应布局？

现代项目应优先使用 flex 或 grid 布局，避免用 float；flex 实现两栏需左侧加 flex-shrink: 0、右侧加 min-width: 0 和 overflow-wrap: break-word；grid 必须显式定义 grid-template-columns；float 仅为 IE9+ 兜底方案，维护成本高。

现代项目直接用 display: flex 或 display: grid，别碰 float —— 它不是布局工具，是为文字环绕图片设计的，硬套两栏只会埋坑。

flex 实现左固定右自适应必须配 min-width: 0

只写 flex: 1 很容易在右侧有长单词、URL 或未设 overflow-wrap 时溢出容器，甚至触发横向滚动条。根本原因是 Flex 默认子项最小宽度不小于内容自身宽度（min-width: auto）。

1. 左侧固定栏加 flex-shrink: 0（显式锁死，防小屏压缩）
2. 右侧自适应栏必须加 min-width: 0，否则 flex: 1 算不出“剩余空间”
3. 父容器需有明确宽度上下文，比如 w-full（Tailwind）或 width: 100%（原生 CSS），否则 flex 无基准可分
4. Safari 14–15 下若右侧带 padding 或 border 却没设 box-sizing: border-box，会把边框当内容宽计入，导致右侧变窄甚至消失

grid 实现必须显式声明 grid-template-columns

只写 display: grid 不会自动拆成两栏——它默认所有子项堆在第一列。必须明确定义轨道，否则布局完全失效。

1. 推荐写法：grid-template-columns: 200px 1fr（左侧固定 200px，右侧占满剩余）
2. 避免用 1fr 1fr 或 auto 1fr，前者让左侧也弹性缩放，后者在内容撑开时行为不可控
3. 间隙统一用 gap: 16px，别依赖子项 margin —— Grid item 的 margin 在部分浏览器中会被忽略
4. 右侧若含长文本，补上 overflow-wrap: break-word 和 min-width: 0，防止换行逻辑被绕过

float + overflow: hidden 是兼容兜底，不是正解

它能用，但仅限于需要支持 IE9+ 的老系统。本质不是“让右边躲开左边”，而是靠触发 BFC（块级格式化上下文）让右侧容器主动绕开浮动区域。一旦漏掉任一条件，整个布局就垮。

1. 左侧必须 float: left + 明确 width（百分比需配 box-sizing: border-box）
2. 右侧不能设 width，必须用 overflow: hidden（或 display: flow-root）触发 BFC
3. 父容器必须清除浮动：overflow: hidden 或伪元素 ::after { content: ""; display: table; clear: both; }
4. HTML 结构顺序不能颠倒：左侧 DOM 必须在前，否则右侧先渲染、占据整行，左侧被挤到下一行
5. IE8 及更早版本大概率失效，即使写对语法——得额外加 zoom: 1 或改用伪元素清除法

真正容易被忽略的点是：flex 和 grid 的响应式切换逻辑完全不同。Flex 靠 flex-direction 改流方向，Grid 靠重写 grid-template-columns；而 float 根本没有响应式概念，全靠媒体查询手动重写 margin/width/overflow，维护成本高到不现实。