float 实现左固定右自适应时，右侧必须紧跟html顺序、设为块级元素并加 overflow: hidden 触发bfc；flex 布局中 left 用 flex: 0 0 200px 更可靠，right 用 flex: 1 自适应；min-height: 100vh 需确保父容器有高度上下文；响应式应统一用 flex-basis 控制宽度。
float 实现左固定右自适应时，右侧元素必须紧跟 HTML 顺序
用 float 做两列布局，左侧 float: left 后，右侧元素若不设置 overflow: hidden 或 display: block 并清除浮动影响，就会塌陷到左侧下方，而不是“绕开”左侧占满剩余宽度。
- 右侧容器必须是块级元素，且推荐加
overflow: hidden（触发 BFC，自动包裹浮动） - 不要给右侧设
float: right—— 那会把它挤到最右，失去“自适应剩余宽度”的效果 - 左侧固定宽建议用具体像素值（如
width: 200px），避免百分比在浮动中行为不稳定 - IE8 及以下需额外处理
hasLayout，但现代项目基本可忽略
.left { float: left; width: 200px; }
.right { overflow: hidden; } /* 关键：BFC 包裹浮动流 */
flex 布局里 flex: 0 0 200px 和 width: 200px 的区别
左侧设固定宽时，直接写 width: 200px 看似简单，但若父容器 flex-direction: row 且没限制主轴尺寸，它可能被压缩或撑开；而 flex: 0 0 200px 明确禁用伸缩，更可靠。
-
flex: 0 0 200px=flex-grow: 0+flex-shrink: 0+flex-basis: 200px，完全锁定尺寸 - 右侧用
flex: 1即可自适应，无需计算calc(100% - 200px) - 注意父容器必须有
display: flex，且子项不能同时设width和flex冲突属性 - Flex 不支持 IE9 及以下，如需兼容，得降级用 float 或 JS 补丁
.container { display: flex; }
.left { flex: 0 0 200px; }
.right { flex: 1; }
右侧内容高度不够时，min-height: 100vh 为什么不管用
常见错觉：给右侧加 min-height: 100vh 就能让它撑满视口。但若父容器（比如 flex 容器）本身没高度，子项的 100vh 仍会按视口算，而非按父容器算 —— 结果就是右侧溢出或留白。
- 真正需要的是让父容器获得高度上下文：给
html和body加height: 100% - 或者，如果布局是全屏应用，直接在 flex 容器上设
min-height: 100vh - 用
height: 100%要小心循环依赖：父无高 → 子设 100% → 无效；优先用min-height - Flex 下更稳妥的做法是让右侧
flex: 1，再配合容器min-height: 100vh，由 flex 自动分配空间
响应式断点下，左侧固定宽变成“相对”怎么办
PC 端设死 200px 没问题，但小屏时通常要收起左侧、变成单列。这时候别用媒体查询反复改 width，容易和 flex-basis 冲突。
- 统一用
flex-basis控制基础宽度，媒体查询里只改它：@media (max-width: 768px) { .left { flex-basis: 0; } .right { flex: 1; } - 或者直接切换布局模式：小屏时移除
display: flex，回退到普通块级流 - 避免在不同断点混用
float和flex，维护成本高，浏览器重排也更频繁 - 如果用 CSS 自定义属性（
--sidebar-width），记得在媒体查询里覆盖，否则变量不会自动响应
实际项目里最容易漏的是父容器的高度来源和 flex 项的收缩行为 —— 特别是当右侧内容为空或极短时，视觉上“消失”了，其实只是被压缩成一行高。这时候看 computed styles 里的 flex-basis 和 height，比猜更有用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
