右侧固定块必须写在html中自适应块之前，且父容器需清除浮动；自适应块设margin-right腾出空间，禁用width，否则失去响应能力。
右侧固定宽度必须写在HTML前面
浮动布局里，float: right 的元素如果出现在自适应区域之后，它会先渲染、脱离文档流，但后续的自适应块仍按正常流排布——结果就是自适应块被“挤到下一行”，完全不生效。所以结构上必须把右侧固定块写在左侧内容块之前。
-
<div id="sidebar"></div>（固定宽）要放在<div id="main"></div>（自适应）前面 - DOM顺序决定渲染顺序，这是浮动布局的硬约束，不是可选项
- 即使加了
margin-right，DOM错位也会让整个布局失效
自适应块不能设 width，但必须设 margin-right
自适应块的核心逻辑是：靠默认的 width: auto（即填满父容器），再用 margin-right “腾出空间”给右侧固定块。一旦手动设了 width（比如 width: 70%），它就失去自适应能力，缩放时会断裂或溢出。
-
#main { margin-right: 300px; }—— 值必须 ≥ 右侧块的总宽度（含 border/padding） - 如果右侧用了
box-sizing: border-box，margin-right可设为精确值（如 300px）；否则建议多留 5–10px 防错位 - 别用
padding-right替代margin-right，padding 是内部留白，不影响布局占位
必须清除浮动，否则父容器高度塌陷
浮动元素脱离文档流，父容器无法感知其高度，导致后续元素（比如 footer）上移、重叠。这不是视觉错觉，是真实的高度丢失。
- 最稳妥的清浮动写法：
.container { overflow: hidden; }（IE8+ 兼容） - 更现代的替代：
.container { display: flow-root; }（IE11+，无副作用，推荐） - 避免用
clear: both单独加空 div，语义差且易漏写 - 测试方法：临时给父容器加
border: 1px solid red，看是否包裹住浮动子元素
margin-right 负值？那是另一套方案，别混用
网上有些资料提到“margin-right: -300px”，这其实是**左右都浮动 + 负边距**的变体（常用于三栏或 DOM 顺序不可调时），和标准的“右固定左自适应”不是一回事。强行套用会导致自适应块宽度计算异常、文字换行错乱。
- 标准做法只对自适应块用正向
margin-right，右侧块用float: right+width - 负 margin 是给浮动容器本身用的（如
#wrap { float: left; width: 100%; }+#sidebar { margin-left: -300px; }），不是给自适应内容块 - 混淆这两者，调试时会发现 layout shift 频繁、响应式断点失效
sidebar 在 main 后面，或者父容器没触发 BFC，整个布局就直接退化成单列。这两点必须同步验证，缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
