直接用display: flex就能解决，核心三行CSS：父容器设display: flex，左侧用flex: 0 0 200px锁定宽度，右侧用flex: 1并加min-width: 300px防塌缩；float方案易致塌陷、难响应式，grid更语义化但不兼容IE。
直接用 display: flex 就能解决，不用算 margin、不用清浮动、也不用 hack 兼容 IE6–9 —— 但得确认你的项目是否要支持 IE10 以下。
flex 布局怎么写才不踩坑
核心就三行 CSS，但容易错在子元素没设宽或父容器忘了 display：
- 父容器必须加
display: flex，否则子项的flex: 1不生效 - 左侧固定栏推荐用
flex: 0 0 200px（比单纯width: 200px更稳，避免被 flex 压缩） - 右侧自适应栏用
flex: 1，不是flex: auto或width: 100%—— 后两者在 flex 容器里行为不可控 - 如果右侧内容极少，可能塌缩成 0 宽，加个
min-width: 300px更安全
.container { display: flex; }
.sidebar { flex: 0 0 200px; }
.main { flex: 1; min-width: 300px; }float + margin 方案还在用？注意这些硬伤
它确实能跑通 IE6，但现代项目里用它，等于主动给自己埋雷：
- 左侧必须设明确宽度（如
width: 200px），且float: left - 右侧靠
margin-left: 200px“让位”，一旦左侧宽度变，右侧必须同步改 —— 没法响应式 - 父容器高度会塌陷，得额外加
overflow: hidden或伪元素清除浮动，否则后续元素会上移 - 如果右侧内容有
float或position: absolute，很容易被遮盖或错位
错误示例：.main { margin-left: 180px; } —— 左侧其实是 200px，结果右边文字挤到左边下面去了。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
grid 布局适合什么场景
如果你只支持 Chrome 57+ / Firefox 52+ / Safari 10.1+，display: grid 是最直白的选择，尤其当布局未来可能扩展为三栏或带 header/footer 的复杂结构时：
- 一行定义列：
grid-template-columns: 200px 1fr，语义清晰，无需操作子元素 - 子元素顺序即渲染顺序，不用管 float 或 flex 主轴方向
- IE 完全不支持，连
-ms-grid都是旧版实现，和现代 grid 不兼容 - 如果右侧要留边距，别用
padding，直接写grid-template-columns: 200px 1fr 20px更可控
.container { display: grid; grid-template-columns: 200px 1fr; }
.sidebar { } /* 不用设宽 */
.main { } /* 也不用设 flex */真正麻烦的不是选哪种方案，而是混用 —— 比如 flex 容器里又嵌套 float 子项，或者 grid 里强行加 float。浏览器不会报错，但布局会突然“消失”或重叠，而且 debug 时很难定位到根源。
