float+margin导致父容器塌陷，因左侧float脱离文档流，父容器无法感知其高度；右侧margin-left仅让位却不参与高度计算，若左右高度不一致，父容器高度即塌陷为0或仅剩内边距。
float + margin 为什么会导致父容器塌陷
左侧 float: left 后脱离文档流，父容器无法感知它的高度；右侧用 margin-left 挤出空间，但自身没参与高度计算——如果左右内容高度不一致，父容器就只剩内边距或空高，看起来“塌了”。常见现象是：底部 #footer 跑到左侧栏上方，或者背景色断层。
清除浮动的三种有效方式（选哪个看结构）
关键不是“清浮动”本身，而是让父容器重新包含浮动子元素的高度。以下方法按兼容性和适用性排序：
-
overflow: hidden（最常用）：给父容器加，简单粗暴，但会裁剪溢出内容（比如下拉菜单、阴影） -
display: flow-root（推荐）：现代标准，语义清晰，无副作用，Chrome 58+/Firefox 57+ 支持，2026年已覆盖绝大多数场景 - 伪元素清除（
::after）：兼容 IE8+，适合需要支持老系统的项目，但代码稍长，容易漏写content: ""
HTML顺序影响布局成败
浮动方案对 DOM 顺序敏感：.left 必须写在 .right 前面。否则即使加了 float: left，浏览器渲染时先看到自适应栏，它会占满整行，把固定栏“挤”到下一行。
如果你必须保持 HTML 中 .right 在前（比如 SEO 或可访问性要求），就别硬用 float —— 改用 display: flex 或 display: grid，它们不依赖顺序。
立即学习“前端免费学习笔记（深入）”；
margin-left 值必须严格匹配固定栏宽度
.right { margin-left: 220px } 这个值不能靠估算或写成百分比（除非你用 calc(100% - 220px) 配合 width: 100%）。原因：
- 百分比 margin 是相对于父容器宽度计算的，而父容器宽度可能变化，导致右侧错位
- 如果左侧用了
border或padding，margin-left应该等于width + border-left + padding-left，否则会有缝隙或重叠 - 避免用
box-sizing: border-box混淆计算逻辑——它只影响自身宽高，不影响 margin 的参照基准
真正麻烦的不是写法，而是当左侧栏内容动态展开（比如折叠菜单）、或右侧有滚动容器时，浮动模型极易失守。这时候别挣扎，直接切到 display: flex：它天然不塌陷、不依赖顺序、margin 计算无关、还能轻松处理等高和对齐。
