固定宽度与流式宽度混排的关键是明确刚性与弹性元素并用盒模型控制交互；width:100%在浮动后溢出因未减侧栏宽，应改用margin-left避让；统一box-sizing:border-box防错位；grid中auto易塌缩，宜用minmax(min-content,1fr)；flex中固定宽元素需设flex-shrink:0和flex-basis。
固定宽度与流式宽度混排的关键，不是强行“混合”，而是明确哪些元素必须刚性占位、哪些必须弹性响应，并用盒模型边界控制它们的交互关系。
为什么 width: 100% 在浮动侧栏后会溢出
主内容区设 width: 100% 后压到左侧固定栏上，本质是它仍按父容器全宽计算，没考虑 float 元素已脱离文档流。浏览器不会自动从 100% 里减去侧栏宽度。
- 正确做法是：主内容区不设
width，只用margin-left避让（如margin-left: 200px） - 若主内容内有
padding或border，需确认是否启用box-sizing: border-box，否则视觉宽度 =margin-left+padding+border+ 内容宽 - 避免在浮动布局中给主内容加
width: calc(100% - 200px)——IE8 不支持 calc，且盒模型差异会让结果不可控
box-sizing 不设对齐，混排就容易错位
固定宽度侧栏设了 width: 200px，但主内容区用了 padding: 20px 却没设 box-sizing，会导致主内容实际占用宽度超出预期，尤其在 Grid 或 Flex 容器中更明显。
- 所有参与混排的块级元素，统一加
box-sizing: border-box是底线 - 如果不加，
width: 200px+padding: 10px+border: 1px= 实际占宽 222px，破坏你预设的间隙逻辑 - 可在重置样式开头统一写：
* { box-sizing: border-box; }，但注意iframe等替换元素不继承，需单独处理
Grid 中 auto 和 1fr 混用时的塌缩陷阱
写 grid-template-columns: 200px auto 1fr 本意是左定宽、中自适应、右弹性，但中间的 auto 在无内容或内容极简时会缩成一条线，导致右侧 1fr 突然撑满剩余全部空间。
- 若中间栏需“最小内容宽 + 可伸展”，改用
minmax(min-content, 1fr) - 若中间栏必须严格按内容宽、不许伸展，且要防塌缩，可设
min-width: 200px配合auto - 不要依赖
auto在小屏下保持可用性——它不响应 viewport 变化，媒体查询中应直接切为1fr单列
Flex 布局里 flex-shrink: 0 是保固定宽的开关
把固定宽度侧栏放进 display: flex 容器时，即使写了 width: 200px，它仍可能被主内容挤压变窄，尤其在空间不足时。
- 必须显式加
flex-shrink: 0，告诉 Flex 不许压缩该元素 - 同时建议补
flex-basis: 200px，比单靠width更可靠（flex-basis是主轴上的初始尺寸） - 主内容区则用
flex: 1（等价于flex: 1 1 0），确保它吸收剩余空间，且允许收缩以适配小屏
混排真正难的不是写法，而是每次加新元素时，都要问一句：它的尺寸是靠父容器约束、自身内容决定，还是由兄弟元素挤出来的？盒模型只是工具，边界归属才是问题核心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
