现代项目应优先使用 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）。
- 左侧固定栏加
flex-shrink: 0（显式锁死，防小屏压缩） - 右侧自适应栏必须加
min-width: 0，否则flex: 1算不出“剩余空间” - 父容器需有明确宽度上下文，比如
w-full（Tailwind）或width: 100%（原生 CSS），否则 flex 无基准可分 - Safari 14–15 下若右侧带
padding或border却没设box-sizing: border-box，会把边框当内容宽计入，导致右侧变窄甚至消失
grid 实现必须显式声明 grid-template-columns
只写 display: grid 不会自动拆成两栏——它默认所有子项堆在第一列。必须明确定义轨道，否则布局完全失效。
- 推荐写法：
grid-template-columns: 200px 1fr（左侧固定 200px，右侧占满剩余） - 避免用
1fr 1fr或auto 1fr，前者让左侧也弹性缩放，后者在内容撑开时行为不可控 - 间隙统一用
gap: 16px，别依赖子项margin—— Grid item 的 margin 在部分浏览器中会被忽略 - 右侧若含长文本，补上
overflow-wrap: break-word和min-width: 0，防止换行逻辑被绕过
float + overflow: hidden 是兼容兜底，不是正解
它能用，但仅限于需要支持 IE9+ 的老系统。本质不是“让右边躲开左边”，而是靠触发 BFC（块级格式化上下文）让右侧容器主动绕开浮动区域。一旦漏掉任一条件，整个布局就垮。
- 左侧必须
float: left+ 明确width（百分比需配box-sizing: border-box） - 右侧不能设
width，必须用overflow: hidden（或display: flow-root）触发 BFC - 父容器必须清除浮动：
overflow: hidden或伪元素::after { content: ""; display: table; clear: both; } - HTML 结构顺序不能颠倒：左侧 DOM 必须在前，否则右侧先渲染、占据整行，左侧被挤到下一行
- IE8 及更早版本大概率失效，即使写对语法——得额外加
zoom: 1或改用伪元素清除法
真正容易被忽略的点是：flex 和 grid 的响应式切换逻辑完全不同。Flex 靠 flex-direction 改流方向，Grid 靠重写 grid-template-columns；而 float 根本没有响应式概念，全靠媒体查询手动重写 margin/width/overflow，维护成本高到不现实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
