height: auto 是块级元素默认行为，无需显式声明；min-height 设最小高度底线，内容多时仍自适应；height: 100% 依赖父容器明确高度，否则塌陷；多数场景只需删除 height 声明，仅用 min-height 控制下限。
height: auto 是默认行为，不需要显式写
大多数块级元素（比如 div、p、section）天然就是 height: auto，也就是说高度会随内容撑开。你手动写 height: auto 不仅多余，还可能干扰其他逻辑——比如当父容器有 flex 或 grid 布局时，它反而会压制弹性行为。
min-height 用来设“最小高度底线”，不是“自适应开关”
min-height 的作用是：内容少时保持至少这个高度，内容多时自动变高。它和 height: auto 不冲突，但也不是让它“开始自适应”的触发器。
- 如果只设
min-height: 200px，内容不足 200px 时盒子高 200px；内容超过 200px 时，高度随内容增长 - 如果同时写了
height: 100px和min-height: 200px，后者会覆盖前者（因为min-height优先级更高），最终表现等同于只写min-height: 200px - 在 Flex 容器里子项设
min-height，需注意父项是否设了align-items: stretch（默认值），否则可能被拉伸或截断
常见踩坑：用 height: 100% 代替自适应
height: 100% 不是自适应，它是“取父容器计算后的高度值”，一旦父容器高度没明确（比如没设 height 或 min-height），结果就是 0 —— 盒子直接塌陷，内容溢出。
.parent {
/* 没设 height，.child 的 height: 100% 就算不出来 */
}
.child {
height: 100%; /* → 实际解析为 height: 0 */
}这种情况想撑开，得回退到自然流：height: auto（或不写），再靠 min-height 控制下限。
立即学习“前端免费学习笔记（深入）”；
真正需要干预自适应的场景其实很少
除非遇到以下情况，否则别动高度相关属性：
- 内容是绝对定位或浮动，脱离文档流 → 父盒子无法感知高度，要用
overflow: hidden或伪元素清除浮动 - 用了
display: flex且子项设了align-self: stretch，但父项没设高度 → 子项会被拉满，掩盖了内容真实高度 - 文本行高/内边距/边框导致视觉高度和
offsetHeight不一致 → 调试时别只看渲染效果，用开发者工具检查 computed height
多数时候，删掉所有 height 相关声明，只在必要处加 min-height，就足够了。
