优先用 display: flex，次选用 display: grid，老项目兜底才用 float + margin；因 flex 语义清晰、顺序自由、无需清浮动，grid 更简洁但兼容性差，float 则因 ie6 兼容性被迫使用却违背内容优先原则且维护成本高。
直接说结论：优先用 display: flex，次选用 display: grid，老项目兜底才用 float + margin。其他方案要么维护成本高，要么语义混乱、可访问性差。
为什么 float + margin 还在用？兼容性倒逼的妥协
它能跑通 IE6，但代价明显：float 让左侧脱离文档流，右侧必须靠 margin-left 主动“让位”，且 HTML 中 sidebar 必须写在 content 前面——这违反内容优先原则。
-
sidebar必须设float: left和明确宽度（如width: 200px） -
content不浮动，但margin-left至少等于左侧宽度（建议多留10px防边距塌陷） - 父容器要清除浮动，否则高度塌陷：
overflow: hidden或伪元素::after { clear: both } - 一旦右侧内容高度超过左侧，footer 会错位——除非你额外加
clear: both或包裹层
display: flex 是现代项目的事实标准
它天然支持语义顺序自由（content 可以写在 HTML 前面），无需计算 margin，也不用清浮动。但注意 IE9 及以下完全不支持。
- 父容器设
display: flex，子项默认水平排列 - 左侧用
flex: 0 0 200px（不缩放、不增长、固定 200px） - 右侧用
flex: 1，自动填满剩余空间；若需最小宽度保护，加min-width: 300px - 如果右侧内容高度不均，加
align-items: flex-start避免底部对齐拉伸
display: grid 最简洁，但浏览器支持有硬门槛
Chrome 57+/Firefox 52+/Safari 10.1+ 支持，IE 全系不支持。适合纯现代环境，比如 Electron 应用或内部管理后台。
- 父容器只需
display: grid; grid-template-columns: 200px 1fr - 子元素不用任何额外样式，顺序即渲染顺序，
content写前面也没问题 - 想加间隙？直接
gap: 16px，比margin更可控 - 别试图给子项加
float或position: absolute——grid 容器会忽略它们
真正容易被忽略的是：左侧固定宽度是否包含 border/padding？
所有方案里，200px 指的是 content-box 宽度。如果你用了 box-sizing: border-box，那 width: 200px 就已含 padding 和 border；若没设，就要手动把它们加进 margin-left 或 calc() 里——否则右侧会溢出或留白异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
