display: flex是首选，因其天然支持等高、不依赖html结构顺序、无需清除浮动、无ie9以下兼容压力，且“不容易错”——父容器必须设display: flex，且不能被float、position: absolute等破坏上下文。
直接用 display: flex 是当前最稳、最简、最推荐的方案。 其他方法要么有 DOM 顺序限制，要么在现代项目里徒增维护成本。
为什么 display: flex 是首选？
它天然支持等高、不依赖 HTML 结构顺序、无需清除浮动、无 IE9 以下兼容压力（2026 年绝大多数项目已放弃 IE9–10）。关键点不是“能用”，而是“不容易错”：
- 父容器必须设
display: flex，且不能被float、position: absolute或display: inline-block破坏上下文 - 左侧元素写
width: 200px即可，不用加flex-shrink: 0（默认就是 0），但内容超长时显式加上更保险 - 右侧元素必须用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%），绝不能写width: 100% - 若右侧含图片、
textarea、长英文单词等，务必加min-width: 0，否则会撑破布局或强制换行
display: grid 怎么写才不翻车？
Grid 更直观，但漏掉一行声明就完全失效。常见错误是只写 display: grid，结果两个子元素叠在第一列里：
- 必须显式定义列轨道：
grid-template-columns: 200px 1fr（左侧固定 200px，右侧占满剩余） - 避免写成
1fr 1fr（左侧也会弹性缩放）或auto 1fr（内容窄时左侧可能收缩） - 留间隙统一用
gap: 12px，别在 item 上写margin——grid 中 margin 行为不稳定，尤其在 Firefox 和 Safari 中容易被忽略 - IE10–11 不支持
1fr，需回退：grid-template-columns: 200px auto+-ms-grid-columns: 200px
老项目还要兼容 IE9 怎么办？
Flex 和 Grid 在 IE9 及以下完全不可用，只能靠传统手段，但要注意几个硬约束：
-
float + overflow: hidden：左侧float: left; width: 200px，右侧overflow: hidden触发 BFC。但 DOM 顺序必须是左侧在前、右侧在后；若 SEO 要求主内容优先，此法失效 -
position: absolute：父容器position: relative，左侧position: absolute; left: 0，右侧用margin-left: 200px占位。缺点是高度无法自适应，右侧内容变高时会盖住下方元素 - 所有 float 方案都必须清除浮动（
overflow: hidden、伪元素或clear: both），否则后续元素会错位
真正容易被忽略的点是：右侧内容一旦包含未约束的长文本、图片或表单控件，flex: 1 或 1fr 就会失效——这不是布局写错了，而是没加 min-width: 0 或 overflow-wrap: break-word。这种问题在开发时看不出，上线后用户一贴长 URL 或上传大图就立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
